Making Viloud Player responsive

If you configured Viloud Player with fixed dimensions using the static width and height configuration options, follow these steps to create a responsive setup:

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). Use 75% for a 4:3 video and 42% for a 24:10 video.

Responsive Player Example: