How to preserve the player aspect ratio on a responsive page

Occasionally, videos displayed on mobile sites or responsive web pages may appear with black bars on the side or won't fit the layout properly. These small issues may be caused by the web page not being configured to maintain the Player's correct scale and size.

Since modern websites are responsive and fluid, it is crucial to ensure that the player can adapt to dynamic pages.

To achieve this, we recommend the following technique to keep the Player responsive while preserving your videos' intended aspect ratio.

Preserve 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

// Replace {PLAYER_ID} and {VIDEO_ID} with your own IDs

<div class="video_wrapper">
 <iframe
 frameborder="0" width="100%" height="100%" 
 src="https://geo.dailymotion.com/player/{PLAYER_ID}.html?video={VIDEO_ID}" 
allowfullscreen allow="autoplay; fullscreen; picture-in-picture; web-share">
 </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

// Replace {PLAYER_ID} and {VIDEO_ID} with your own IDs

<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"; fullscreen; picture-in-picture; web-share"
 src="https://geo.dailymotion.com/player/{PLAYER_ID}.html?video={VIDEO_ID}">
</iframe>
</div>

Other aspect ratios

This technique can be applied to other aspect ratios, such as 1:1, 4:3, 3:2, or 8:5. The aspect ratio is controlled by the padding-bottom value: adjusting the percentage in padding-bottom allows you to modify the ratio accordingly.