How do I make a responsive embed code?

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) uses a fixed width and height.

Handily people have made online tools to quickly convert an iframe to a responsive embed code. One such tool is embedresponsively.com.

If you were to use that particular one, click on ‘Generic iFrame’ and then simply copy the standard embed code in to that box. It will look like this:

<iframe id=“vp_iframe_vabcdefgh” width=“640” height=“360” src=“https://vidbeo.com/e/vabcdefgh" frameborder=“0” scrolling=“no” allowfullscreen></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 id=‘vp_iframe_vabcdefgh’ width=‘640’ height=‘360’ src=‘https://vidbeo.com/e/vabcdefgh' frameborder=‘0’ scrolling=‘no’ allowfullscreen></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 to the questions about the player