Stacks Image 6

Fit my Video

Videos that fit any space, on any screen size.

Fit my Video

Embed videos from your favourite providers, and rest assured, they will always fit their space..

Overview.

A beautifully simple way to add responsive video to your page.
Fit my video stack makes your embedded videos fully responsive, which means they will never be displayed larger than the available space in the part of the page you place them.

The stack supports videos from : YouTube, Vimeo, Blip.tv, Viddler and Kickstarter.
You may set a maximum width the video can ever be, and align the video within it's container.
Simply pasting your video's embed code into the stack, is all you need to do to have fully responsive videos.

Instant download.

Version : 1.0.7

Responsive : Yes

First released : 17/4/2013

Last Updated : 9/8/2016

Stacks V 2.0 or greater.

Live demo.

You can see a live example of the stack in action below.

We are showing the stack using one of our YouTube videos here as a demo, but you can happily use Vimeo videos as well. If you resize the browser window, you will see that the video resizes to suit, no matter what size the screen becomes. This holds true where ever you place the videos using the stack.

Fit My Video Tag

Little Jersey, is the little Island that Doobox calls home :-)

Image

Quick Fact : It does not matter where you place the stack, your video will alway be made to fit inside that location, be that a single column like this, or a 5 column stack, where the video would simply be shrunk to fit inside the column. This happens at any screen size and dynamically if the user resizes the browser window.

Stacks settings.

In this section we have provided a comprehensive list of available settings, and a full description of what each of the settings does for the stack.

Stacks Image 243
Max width

This is the maximum width the video will ever be displayed. This does not affect a users choice to make the video full screen when watching it.

Align

If the max width you chose for the video is narrower than the location you place it, then you can set how it aligns in the parent container here.

Tag

Because videos can't be displayed in Stacks edit mode, you can input a text here to distinguish one video from another. This text will display in the centre of the video place holder, on the stack it's self.

Stacks edit mode.

We pay great attention to how we approach the editing interface of every stack, to ensure intuitive ease of use.

Stacks Image 297

In edit mode you get a representation of where you video will be displayed. There is a handy input in the settings to change the text in the centre there, so you may distinguish one video from another. Just double click the text at the top, and replace it with your videos embed code. You are done.

Stacks FAQ.

Important information that is pertinent to this stack. Please read, as there may well be something here that is essential to the deployment of this stack.

Browser support

This stack is supported in all modern browsers. Any exception to this rule will be listed below.

Safari

Chrome

Firefox

Explorer

How do I get a YouTube video embed code?

  • On a computer, go to the YouTube video you want to embed.
  • Under the video, click Share .
  • Click Embed.
  • From the box that appears, copy the HTML code.
  • Paste the code into the stack.

How do I get a Vimeo video embed code?

  • Go to the video page and click the Share button that appears when you hover your mouse over the video player.
  • In the pop-up window, you'll see a field containing an embed code for the video.
  • Just copy the magic code and paste it into the stack.

Known compatibility issues

There are no known compatibility issues with this stack.

Stack installation

Download.

After purchase, you will be sent an email containing a download link for the stack.
Download the zip file from the link, and unzip it to reveal the stack inside.
You should now see the stack as a logo style icon.

Normal installation.

Double click the un-zipped stack file (the one that looks like a piece of lego).
This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Installation where more than one version of Rapidweaver is installed.

Sometimes if there is more than one version of Rapidweaver installed on your system, the double click method launches the wrong version of Rapidweaver to install the stack. To ensure the it is installed into the version you want to install to, you can, instead of double clicking the stack, just drag and drop it onto the appropriate Rapidweaver app icon in your dock at the bottom of your screen.

This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Secure checkout.

We trust PayPal as our secure checkout provider.

Don't have a PayPal account? No worries. PayPal allows you to pay with your credit card if you do not have an account set-up.

Instant download.

Stacks Image 589