Search code examples
javascripthtml5-videojwplayer6

JW Player 6 Plugin for Wordpress edit jwplayer.js for white background

I have:

  • Wordpress V4.4.1
  • JW Player 6 Plugin for Wordpress - Version 2.1.14

I have fixed a few things, which are:

  • Remove blue border when you click on the video outline:0;
  • Reduce bottom margin a little when you responsive design margin-bottom: -11px;

The CSS code looks like this:

#jwplayer-0
{
outline:0;
margin-bottom: -11px;
}

The Problem - Black bars / background

  • When zooming in & out via chrome/FF, you get a 1px bar on the left/right or top. this is for the HTML5 player.

  • All my videos have a white background and also the preview image has a white background, thus the 1px bar is annoying.

Solution After reading endless sites and posts I have determined that I need to edit:

  • jwplayer.js
  • jwplayer.html5.js

As stated in this post Video embed background color

I have searched the plugin folder jw-player-plugin-for-wordpress bit I cannot find these files. I assume they are being called from a remote server, are they? I have even search all the code for background-color etc using Notepad++, nothing comes up.

Does anyone know how to change video embed background color using the plugin?

Here's the code used in WP for the video:

[jwplayer player='2' abouttext='test' aboutlink='http://www.test.com' primary='html5' image='/wp-content/uploads/2016/01/test.jpg' jwplayer sources="{ file:'/wp-content/uploads/2016/01/test.webm' },{ file:'/wp-content/uploads/2016/01/test.mp4' }"]
  • WEBM - Video for CHROME/FF - Fixes grey video
  • MP4 - For all mobile devices
Solution

  • As you are using WebM and MP4 media types, the player should be rendering in HTML5 mode - as per the "primary" setting.

    Given this, you should be able to target the player using CSS and override the background color:

    .jwplayer{background-color:transparent!important;}