Javascript

Make JW Player Responsive

The following article will show a code snippet of how you can use the third party application JWplayer on your website to display videos and an easy way of how you can make these videos responsive.

JWPlayer is an video player that will automatically switch between flash or HTML5 video depending on the browser that the video is being viewed on. This means that it takes cares of any browser support problems that comes with HTML5 videos.

jwplayer

HTML5 videos will work fine in all browsers except for IE8 or lower. JWPlayer will check the browser version you are using and play the video using HTML5 or Flash where it needs to.

JWPlayer also allows you to customise the player with your own images so you can easily brand it to fit your website, which looks a lot more professional than simply embedding a YouTube video on your site.

Other features include:

  • Pre-roll ads
  • Post-roll ads
  • Google Analytics
  • Video Publishing
  • Live Streaming
  • Display Captions
  • Multiple Skins
  • Track play views
  • Track video drop offs

If you are interested in using JWPlayer on your site you can purchase it here.

JWPlayer

Adding JWPlayer To Your Site

To add JWPlayer to your website then you need to add some JavaScript to the page passing in the video you want to play and the width and height of the video.

jwplayer("myElement").setup({
      file: "/uploads/myVideo.mp4",
      width: "640",
      height: "360"
    });

The problem with this is that when the video is added to the page it will add a style="" attribute with width 640px, so if you view this video on the device smaller than 640px wide then the video will come off the page.

As of JWPlayer 6.3 support for responsiveness was introduced you can now place a width of 100% on the video, which will make sure that video fits the width of the device. But if a video is always going to be set to 100% of the device with a fixed height it can shrink or stretch to fit video on the device.

With this support of responsive videos JWPlayer now includes a new property to set the aspect ratio of the video.

<div id="myElement"></div>

<script>
    jwplayer("myElement").setup({
      file: "/uploads/myVideo.mp4",
      image: "/uploads/myPoster.jpg",
      width: "100%",
      aspectratio: "16:9"
    });
</script>

This will make sure that the video is never struck or stretched to the fit the device and will also stay at 16:9 aspect ratio.

Back to top

Fastest WordPress Hosting With WPEngine

Stunning speed, powerful security, and best-in-class customer service. At WP Engine.

Risk free for 60 days