Our video player is responsive. That means it can automatically adjust its size based on the available space.

However it can only do that if it is embedded on your page in a particular way. That is because our standard embed code (in common with almost all other online video platforms) initially is set to use a defined width and height.

You can tick the box in our dashboard to convert it to a responsive embed code. You will see the snippet of code gains a wrapper around it, and that controls its size. It does not set a width but instead enforces an aspect ratio (which defaults to a standard widescreen 16:9).

Alternatively you might prefer to use an online tool which also convert an iframe to a responsive embed code. One such example is https://embedresponsively.com/. To use that, click on ‘Generic iFrame’ and then simply copy the embed code from our video CMS in to their box. It will look something like this:

<iframe width=“640” height=“360” src=“https://watch.vidbeo.com/VIDEO-ID-HERE/embed.html" frameborder=“0” allowfullscreen allow=“autoplay; encrypted-media;"></iframe>

Click on the blue ‘Embed’ button and a responsive version of that same embed code will be shown below.

You will see below that it actually follows a standard template. All that changes (assuming all your videos are the same size) is the unique id of the video (the random characters you see in the URL). That would save you using that tool each time:

<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 src=‘https://watch.vidbeo.com/VIDEO-ID-HERE/embed.html' frameborder=‘0’ allowfullscreen allow=“autoplay; encrypted-media;"></iframe>

If you want to find out more about how the technique works, there are many articles, such as: http://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/.

If you have any other questions about the responsive embed code, or about our enterprise video hosting in general, please do get in touch.

Go back