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.

Handily people have made online tools to quickly convert an iframe to a responsive embed code. One such tool is https://embedresponsively.com/: 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/embed/VIDEO-ID-HERE" 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 at the end of the URL). That would save you visiting a site like embedresponsively 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/embed/VIDEO-ID-HERE' 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