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