How to preserve the player aspect ratio on a responsive page

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="//app.viloud.tv/player/embed/channel/ac7a1c3c1505a4744a4c58a704b1cb81" frameborder="0" allowfullscreen></iframe>
   </div>
   	

Change the src value of the iframe by your channel embed link.


2. 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. 

Responsive Player Example (16:9):