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

Responsive Player Example:

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