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.
First, remove any fixed width and height values from the iframe snippet. For example:
width=“640” height=“360”
In their place, add a style attribute to set its width to be 100%. You will also want to enforce the aspect ratio. Most videos are 16:9:
<iframe style=“width: 100%; aspect-ratio: 16/9;” src=”https://embed.vidbeo.com/VIDEO-ID-HERE” frameborder=“0” allowfullscreen allow=“autoplay; encrypted-media;”></iframe>
It should now fill the width of its container 😊 .
If you are using our player API to dynamically embed a video, that has a responsive option. Simply set that as true { responsive: true } and of course do not set a fixed width or height value.
The other option is to use an online tool to convert the iframe to make a responsive embed code. One such example is https://embedresponsively.com/. To use that, click on ‘Generic iFrame’.
You will see it follows a standard template. Their approach wraps the iframe in a div tag which enforces a 16:9 aspect ratio by using a padding-bottom value (of 56.25%):
<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://embed.vidbeo.com/VIDEO-ID-HERE’ frameborder=‘0’ allowfullscreen allow=“autoplay; encrypted-media;”></iframe>
If you want to find out more about how that 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.
Updated: September 25, 2023