Date: May 3, 2013 Author: Yael Katz

With sales of mobile devices now outpacing those of desktop PCs, web designers face a challenge: how to best present content across all these devices. Smartphone screens average around 4” diagonally, tablets are 7″ to 10″, laptops average around 14″ and desktop monitors go up to 30″ these days. All these different devices result in screens of varying shapes and sizes. This presents a challenge when laying out a page – how to provide a viewing experience that looks good on every screen. One solution is responsive design.

The old JW Player was nonresponsive

What is Responsive Design?

The best way to understand responsive design is to look at what happens when a page is not responsive:

As you can see, when design is not responsive, when you resize your screen, in this case the browser window, the page elements do not resize as well. The traditional way around this is to create multiple sites, one for the desktop, one for a smartphone, etc. This is not ideal, both from the point of view of the designer/developer and the end user experience.

Responsive Web Design is an approach to creating a website that dynamically adapts itself to the size of the screen on which it is being displayed. Whether you are on a tablet, smartphone or desktop, responsive pages rearrange and resize content to provide the optimal viewing experience. If you are interested in looking at a few responsive design examples, we highly recommend checking out this blog.

The Challenge with Responsive Video

While text can easily be manipulated in a responsive design, embedded video has remained a challenge. Unlike the HTML5 <video> tag, which can be scaled responsively by setting max-width:100% and height:auto, embedded players like YouTube, Vimeo and JW Player don’t scale automatically. This is mainly because their embeds contain a fixed width and height in pixels. Responsive designs lay out page elements through relative units, such as percentages, rather than pixels. To properly make a player responsive, it is important that the aspect ratio of the video be maintained by also scaling the height according to this ratio.

To be honest, it is possible to make embedded players such as earlier versions of JW6 responsive by using various CSS hacks. For instance, Elastic Videos uses iframes where the source is 100×100 pixels. FitVids is a jquery plugin that uses additional javascript libraries to achieve responsive design. As you can imagine, these are not the most elegant solutions, nor are they scalable.

Because responsive design is a current web trend used by a lot of sites, we have received many feature requests for JW Player to support it. We wanted to provide a setable option within the player to make it responsive, rather than merely a set of instructions to use JW Player with one of the existing hacks. This was a challenge because JW Player is used on so many sites across both Flash and HTML5 modes, that we had to avoid potential CSS clashes (conflicts between the CSS in the player and the existing CSS on the page).

Illustration of a responsive site across devices

Introducing JW Player Responsive Design

With the release of JW Player 6.4, we introduced native support for responsive design. To get started, all you have to do is set the player width to a percentage, and indicate the video’s aspect ratio. The player will automatically resize its height accordingly. Here is an example setup:

Click resize to scale the video responsively:


JW Player Setup Code

The responsive player setup options for this demo are displayed below. To learn more about embedding JW Player, check out our support documentation.

jwplayer("myResponsiveVideo").setup({
          file: "/assets/tearsofsteel.mp4",
          image: "/assets/tearsofsteel.jpg",
          width: "100%",
          aspectratio: "12:5"
});

WordPress Setup Options

Our WordPress Plugin version 2.1 makes it even easier to setup JW Player with Responsive design. In the JW Player management section, simply set the player dimensions to responsive:

responsive design setup for JW Player in WordPress

Check out this demo to test out a responsive vs a non-responsive JW Player. If you have questions on this functionality, or ideas for future updates, please let us know!

15 comments

    • Ethan LongTail

      June 17, 2013 at 3:16 am


      The player won’t resize itself, if that is what you are asking.

    • balacobaco

      June 17, 2013 at 9:40 pm


      This is not what I’m asking. I’m asking if the player will choose a lower resolution source when small, and higher resolution source when big.

      If an m3u8, or ism, or f4m is the source, containing various resolutions and bitrates, and a breakpoint triggers a change in the players size, will the player adapt the source resolution/bitrate?

    • Ethan LongTail

      June 18, 2013 at 3:07 am


      The player will not pick a smaller size or bigger based on how big the player is.

    • balacobaco

      June 21, 2013 at 10:24 pm


      Is there any way to hook in and trigger a change?

    • Ali Ejaz

      June 26, 2014 at 3:23 pm


      Its great. But the problem is that it doesn’t work with playlist. In detail, I want captions when it’s responsive as well. When I introduce playlist to add tracks, the player is no more responsive. Has any one found a work around for that? Has anyone been able to achieve Responsive JW Player with captions (and also compatible on IE8)? I would highly appreciate if any one can share their opinion on this one.

      Thanks,
      Ali

    • Peter Kozmian

      May 8, 2013 at 7:17 pm


      Thats nice! Personally I’m still using the HTML Configuration library written by James Hereven because it works without Iframes or CSS hacks to make version 5.10 responsive – while allowing embedding by enhancing the video tag.

      Do you have plans for future 5.x updates including responsive design?

    • Ethan LongTail

      May 8, 2013 at 8:37 pm


      I don’t believe JW5 is being worked on any longer, I’m afraid.

    • Anonymous

      May 10, 2013 at 1:28 am


      This is a pretty awesome new feature! Thanks for including it!

    • Ethan LongTail

      May 11, 2013 at 4:20 pm


      Np :) !

    • brian@bcpaul.com

      May 28, 2013 at 5:28 pm


      When can we see this implemented in BOTR embeds?

    • Ethan LongTail

      May 28, 2013 at 6:02 pm


      Not sure on the ETA on that.

    • cd

      June 5, 2013 at 10:13 am


      for wordpress you say “simply set the player dimensions to responsive” and then you list 6 responsive settings. how does one determine which of the 6 to select?

    • Ethan LongTail

      June 5, 2013 at 6:28 pm


      It really depends which aspect ratio you want, I guess,

    • balacobaco

      June 16, 2013 at 4:37 pm


      Hello,

      If a manifest file — containing sources of various resolutions — is supplied, will the stream adapt when the player resizes?

      Cheers

Leave a comment

Your email address will not be published



We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our Comments Policy