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.

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.

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.