How to preserve the player aspect ratio on a responsive page

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

How to keep the aspect ratio?

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. Place a wrapper element outside of the iframe that contains the player. Example:

    <div class="myWrapper">
        <iframe src="//" frameborder="0" allowfullscreen></iframe>
  2. Change the src value of the iframe by your channel embed link.

  3. Use the following CSS to have the iframe resize with a 16:9 aspectratio:

    .myWrapper {
      position: relative;
      padding-bottom: 56%;
      height: 0;
    .myWrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

    The 56% part is what defines the aspectratio (16:9).

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. 

Aspect Ratio Padding-Bottom
1:1 100%
16:9 56.25%
4:3 75%
3:2 66.66%
8:5 62.5%

Responsive Player Example (16:9):

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.