How to preserve the player aspect ratio on a responsive page

Note: This article focuses on how to ensure the player iframe keeps the 16:9 aspect ratio. This is a widely used technique and can be used with other aspect ratios.

The width & height of the player determines the aspect ratio. We recommend an aspect ratio of 16:9.

There may be instances when you are viewing a video on a mobile site or a responsive web page and the video appears with black bars on the side or won't fit the layout. These small issues may be caused by the web page not being configured to maintain the correct scale and size of the player. As websites are responsive and fluid, we want to ensure the player is flexible working with dynamic pages. We recommend the following technique to keep the player responsive and to preserve the aspect ratio of the video. 

How to keep the aspect ratio?

Example 1. With HTML & CSS

This is a simple and common CSS trick to preserve the aspect ratio. The below example is for a 16:9 ratio, however, this can be changed to work for other aspect ratios.

1. In the HTML, put the player <iframe> in a <div> container.
2. In the CSS for the <div>, add a percentage value for padding-bottom and set the position to relative, this will maintain the aspect ratio of the container. The value of the padding determines the aspect ratio. ie 56.25% = 16:9. 
3. In the CSS for the <iframe>, set the position to absolute, it will take a fixed position relative to the parent <div>.  

HTML

 <div class="video_wrapper">
<iframe frameborder="0" width="100%" height="100%" src="https://www.dailymotion.com/embed/video/Your_dailymotion_embed_URL" allowfullscreen allow="autoplay">
</iframe></div>

.video_wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */ 
}
iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Example 2. Manual Embed with HTML only

This example is similar to example 1, but all the configuration and styling is configured within the HTML.

HTML

<div style="position:relative;padding-bottom:56.25%;">
 <iframe style="width:100%;height:100%;position:absolute;left:0px;top:0px;"
 frameborder="0" width="100%" height="100%" 
 allowfullscreen allow="autoplay"
 src="YOUR_DAILYMOTION_EMBED_URL">
</iframe>
</div>

Other Ratios

This technique can work with other aspect ratios (1:1, 4:3, 3:2, 8:5). The padding value ('padding-bottom:') determines the ratio, change the percentage padding-bottom values to change the ratio.