Embed responsively

This snippet of code is known as the video embed code. By copying and pasting it to your own site, the video player appears there, “embedded” within the page. Initially this embed code is not responsive since in common with all major video platforms, we use an iframe. That assigns a region of your page to show the player. The standard embed code looks something like this:

<iframe id=“abcdefg” width=“640” height=“360” src=”https://embed.vidbeo.com/abcdefg” frameborder=“0” allowfullscreen><iframe>

The attributes you will be most likely to change are the width and the height. Normally we use a standard size of 640 pixels wide by 360 pixels high. This also uses the most common aspect ratio (width:height) of 16:9, and is probably how your content was produced.

However cinema trailers are often wider, likely 21:9. While some videos shot on mobile phones have a portrait-style aspect ratio, such as 9:16. That means that they are taller than they are wide.

You can adjust the size of the iframe embed and the player should try its best to maintain the aspect ratio of your content, to avoid distorting it or reducing its quality. That means if necessary it will add black borders above or to the side of your content in order to maintain the correct aspect ratio of width:height.

For example in the below image, we show a video we embedded at 16:9 at just 400 by 360 (instead of the correct size of 640 by 360). As you can see, it still appears at the correct ratio and the player automatically adds black borders above and below to not stretch the video vertically:

Embed responsively

In the below image, the trailer was shot at 21:9 and so we embedded the video at a matching 21:9 (576 by 240). The player automatically sizes the content to match and no black regions are therefore required:

Responsive embed

In the above examples, we fixed the width. However there is another approach: to embed responsively.

The difference is that embedding responsively makes the player expand to fill its available container. This is particularly useful if you are designing for mobile devices, where space is limited. You will usually want your content to fill the available width of the screen, leaving your outer containing elements to decide what that width should be (as opposed to coding a fixed number within the iframe embed code, as in the examples above).

In our dashboard we have a checkbox above our embed code that you can tick. That will automatically wrap the snippet of code in a responsive wrapper.

Or you can use an online tool such as http://embedresponsively.com/. In their case, if you click on ‘Generic iframe’ and then paste in your standard iframe embed code, you will see it wraps it in an outer element. The now-responsive converted code will look like:

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class=‘embed-container’><iframe id=‘abcdefg’ width=‘640’ height=‘360’ src=’https://embed.vidbeo.com/abcdefg’ frameborder=‘0’ allowfullscreen></iframe></div>

Note: As the site suggests, you will likely need to remove the width=“640” and height=“360” from the iframe tag in order to make it work - see what works best for you. If you look into how this responsive embed technique works, it is the padding-bottom: 56.25% that actually achieves the 16:9 aspect ratio. That number is simply 9 divided by 16 (from the ratio), multipled by 100. So 9/16 is 0.5625, and then multiplied by 100 (to make it a percentage) equals 56.25%.

Since the responsive embed code follows a standard template, you might like to incorporate that into your content management system to save you having to build a new version each time and duplicate the rules it comes with?

To find out more please start a free trial, or simply email [email protected] with any questions you may have.

Updated: October 7, 2016