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


Responsive Player Example:

Still need help? Contact Us Contact Us