Can I embed a video on a responsive website?

Videos embedded using the iframe embed code will resize correctly on websites that resize content dynamically (known as responsive web design). At this time, vidgets embedded on a responsive website will not resize when the browser/device size changes.

Arpeggio Player

Our new Arpeggio player was built with responsive design in mind. All you need to do is edit the embed code to change the width of the player to 100% and remove the height tag.

Change: width="640px" to width="100%"

Remove: height="360px"

Example:

<script type="text/javascript" src="//static.cdn-ec.viddler.com/js/arpeggio/v3/build/main-built.js"></script>

<div class="viddler-auto-embed" data-video-id="7c1804e8" data-width="640" data-height="360"></div>

will become:

<script type="text/javascript" src="//static.cdn-ec.viddler.com/js/arpeggio/v3/build/main-built.js"></script>

<div class="viddler-auto-embed" data-video-id="7c1804e8" data-width="100%"></div>

If you're looking to get started quickly, then you may copy the embed code above, and just change the video id to a video id for a video/audio on your account. Also, please note that you will need to make sure that your embedded player is within a container. Usually, our clients will use either a DIV or a cell within a table.

Legacy Player

Only some embed codes worked out of the box. However, with some simple modifications I was able to have it support the iframe embed. All you have to do is wrap the video with <div class=“flex-video”> for the way I implemented it.

The only change you have to do is upload the fitvids.js to your site and change the url pointing to it.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script src="http://yourwebsite.com/folder/jquery.fitvids.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
// Basic FitVids Test
$(".flex-video").fitVids({ customSelector: "iframe[src^='//www.viddler.com/']"});
// ]]></script>

Here's an example of this in action: http://info.viddler.com/responsive-video-website-example

Tools

FitVid.js (Github) - Our team has used and recommends FitVid.js for enabling the responsive sizing of Viddler videos within your website.
CSS Media Queries - Media Queries are the standard for creating responsive websites. You can customise your site and how it handles the sizing of videos using these code standards.

Articles in this section

Arpeggio Player

Legacy Player

Tools

Comments