Making JW Player Responsive

This article explains how to setup JW Player on a responsive site. When responsive, players scale to the width of their container element, maintaining the video aspect ratio.

Introduction

By default, JW Player is configured with fixed dimensions, using the static width and height configuration options. However, JW Player can also be set up in a responsive mode. In that case:

  • width is set to a percentage instead of numerical pixel size.
  • aspectratio is used instead of height. This tells JW Player the aspect ratio of the video in width:height format. Common values are 16:9, 24:10 or 4:3.

Example

 

Since we've configured our width to be 50%, the above JW Player will automatically resize itself to the 1/2 the width of the container div, maintaining an aspect-ratio of 16:9. If this were set at 100%, we would fill the entire size of our div.

Using the configuration mentioned above, a responsive player's embed code would look similar to:

var playerInstance = jwplayer("container")
playerInstance.setup({
file: "/uploads/myVideo.mp4",
width: "50%",
aspectratio: "16:9"
});

Responsive iFrames

When loading JW Player in an iFrame, it's still possible to create a responsive setup:

  1. Inside the iFrame, ensure JW Player is setup to be 100% wide, according to the instructions above.
  2. Place a wrapper element outside of the iframe that contains the player. Example:
    <div class="myWrapper">
        <iframe src="http://example.com/player.html" frameborder="0" allowfullscreen></iframe>
    </div>
    
  3. Use the following CSS to have the iframe resize with a 16:9 aspectratio:
    .myWrapper {
      position: relative;
      padding-bottom: 56%;
      padding-top: 20px;
      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.

See this CSS-Tricks article for more info on this iFrame setup.

Did you find this article helpful?

Please log in to rate this article.