icons Created with Sketch.
☰
×
contact us
Dailymotion

Players

Preserve the player aspect ratio on a responsive page

Follow
  • Updated

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.

16:9 and other aspect ratios

The aspect ratio is defined by the Player's width & height.

This article focuses on ensuring that the Player iFrame preserves a 16:9 aspect ratio, a widely used standard. However, the technique described in this article can also be adapted to other aspect ratios.

Unlock advanced customization options, including aspect ratio, and create your own Player configurations with our Pro offers. Learn more about Dailymotion Pro.

 

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>

 CSS

.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: 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. The aspect ratio is controlled by the padding-bottom value: adjusting the percentage in padding-bottom allows you to modify the ratio accordingly.

  Aspect ratio Padding-bottom
Square 1:1 100%
Horizontal



16:9 56.25%
4:3 75%
3:2 66.66%
8:5 62.5%
Vertical

3:4 133.33%
9:16 177.7%

 

 

Related articles