How do I make an iframe embed responsive?

A responsive iframe will render well across a variety of devices and screen sizes. By default, when you copy an iframe embed code, we will provide a responsive embed code that works for all different video aspect ratios.

Responsive Viostream Iframe

To grab your Viostream embed code, follow these steps:

1. Navigate to the  Library
2. Locate the asset you wish to embed
3. Click on the  Share button.
4. Click the Embed tab.
5. Click Copy Embed Code.

tip

The responsive embed code is based on the aspect ratio of the video. If this ratio changes, the embed code will still be responsive but viewers may see unusual spacing on the sides or top and bottom of the video. To remove this, simply copy a new responsive embed code and update your website.

Generic instructions

note

This page ranks quite well on Google so we are leaving some generic instructions here as well. If you are a Viostream user just ignore these and copy the default embed code from the Viostream platform.

In order to make your embedded iframe responsive, you need to wrap the iframe in a div and apply inline css. Follow these simple steps:

1. Get the iframe embed code and paste in into your HTML page.
2. Set the height and the width attributes of the iframe tag to 100%
3. Change the CSS position of the iframe tag to 'absolute' and set the left and top CSS parameters to '0'
4. Add a div container around the iframe tag as it is shown by the following sample code. The value of the 'padding-bottom' parameter is based on the aspect ratio of the content (in case of a 16:9 video the calculation is 9/16 = 0.5625)

Your final html code should look similar to the below:

<div style="padding-bottom:56.25%; position:relative; display:block; width: 100%">
  <iframe width="100%" height="100%"
    src="https://play.viostream.com/iframe/s0m3m3d14?playerKey=s0m3p14y3r"
    frameborder="0" allowfullscreen="" style="position:absolute; top:0; left: 0">
  </iframe>
</div>