• Share a link to this article:

Embedded Video

Embedded video makes a wonderful addition to nearly any website. Video is richly-engaging for website users and a powerful method to convey information about your products or services.

ThemeFlood RapidWeaver themes are specially optimised for video; making it quicker, easier and cheaper to get video working within your webpages.

Making video responsive

A common problem with video in websites is that the fixed dimensions of a video can cause video to get cropped or badly distorted on smaller screens (like smartphones).

As of September 2014, all ThemeFlood RapidWeaver themes include the FitVids plugin. This opensource jQuery javascript plugin scans your page for embedded YouTube or Vimeo content. Experimental support is also provided for Blip.tv, Viddler and Kickstarter video too. FitVids converts the standard embed code into a fully responsive video player. Responsive video means that your video will be resized to fit the container it's placed within; on different screen sizes. In other words, the video will not get cropped off the edge of the page or display ugly scrollbars.

FitVids is already included in all recently updated and new premium ThemeFlood RapidWeaver themes, as of Autumn 2014. There's nothing else you need to download and install. You do not need to purchase any additional stacks or plugins. The theme does all the hard work for you, and this will save you both time and money.

Continue to use the standard embed code for your YouTube and Vimeo video content. No modifications are required to this code. This is what your typical YouTube embed code looks like:

<iframe width="1280" height="720" src="https://www.youtube.com/embed/mP7O7Blv-6s?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

To exclude video content from FitVids and responsive behaviour, nest the video within a new divisional container with a class attribute of fitvidsignore applied; like this:

<div class="fitvidsignore">
<iframe width="1280" height="720" src="//www.youtube.com/embed/mP7O7Blv-6s?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

HTML5 video will attempt to scale automatically, without help from FitVids. However there are known shortcomings and bugs relating to the scaling of HTML5 video content in some web browsers, especially on smaller handheld devices like the iPhone. So you may wish to consider using a proper HTML5 video stack, like Player. Not only will this provide responsive behaviour on all common devices, but it will also let you customise your video player to match your existing RapidWeaver theme. A free demo version is available for you to download and test.

If you're seeking to apply a full-size YouTube video to the background of your page, consider using the free uTubeFill stack element. This clever little stack will fetch any public video (using the video ID) and embed it safely on the page background. It works in most (but not all) RapidWeaver themes. Options are provided to loop the video and mute it. uTubeFill is great for use in themes like Photogenic and Splash.