Z-index problem with html5 video-js in IE/firefox

HTML & CSS
1

Hi I’ve recently implemented the new html5 video-js plugin (http://videojs.com/ )on a site at work.

However the video I’ve been given has an ugly grey right hand border on it. I’m pretty sure it’s on the video .mp4 itself, and not in my css, or in the standard video-js.css. I am unable to change the video.

I’ve implemented a crappy fix for this by putting in an absolutely positioned whiteMask div over the right hand side of the video with a plain white background to cover up the blemish. This div is not within the video-js box container div, but is in a parent container with relative positioning.

This works in Chrome however both IE and firefox seem to get confused with the z-index positioning, and both position the div BEHIND the video element.

Although IE has well known z-index problems, it seems strange this is happening in firefox. Here’s a brief code extract and the link. The video js comes with it’s own css styled skin, and the elements within it all contain z-index stacked layers. Therefore my div is positioned at 1002.

If anyone can help this might be a good example for others using video js and Z-index - or maybe it’s something more simple, I’ve been at it for hours and hours!

Please see the problem here:

http://www.jigsawbox.com/

HTML

<div id=“video”><!-- this is parent container –>
<div class=“whiteMask”></div>
<div class="video js box container> <!–All video-js in here–> </div>
</div><!–end of video div–>

CSS

video {
width:941px;
height:350px;
margin:0 0 10px 0;
position:relative;
}

whiteMask {
background:url(“…/images/whiteMask.png”) no-repeat scroll left top #FFF;
position:absolute;
display:block;
height:350px;
width:5px;
top:0;
right:1px;
z-index:1002;
}

2

Hi,

Try hiding the border in another way. Remove the whiteMask element and try this.


.video-js-box{overflow:hidden}
.video-js-box object{left:1px;position:relative}

Only tested in Firebug but seems to work.

3

Hi Paul,

thanks so much for this help.

I finally got around to amending this issue and using your technique was able to fix.

Had to mess around a bit to deal with browser differences but essentially I applied your principle and moved the video behind an outer div.

Here is my final code for the different browsers and their various fallbacks:

video { /* This is the outer div */
height: 350px;
margin: 0 0 10px;
overflow: hidden;
position: relative;
width: 936px;
}

Chrome specific

video.video-js {
background-color:#FFFFFF;
padding-bottom:0;
padding-left:0;
padding-right:0;
padding-top:0;
position:relative;
}

.video-js-box .video-js {
left:1px;
}

Firefox (uses flash fallback)
.video-js-box {
border: medium none !important;
line-height: 0 !important;
margin: 0;
padding: 0 !important;
position: relative;
text-align: left;
overflow: hidden;
}

.video-js-box object {
left: 1px;
position: relative;
}

http://www.jigsawbox.com/

Thanks again for your help,

All the best.