how is it possible to put a div over a jwplayer5 video?

2.5k Views Asked by At

The problem is that on IE the video jwplayer5 goes over everything, and my goal is the user to avoid to click over the video, to prevent PLAY/PAUSE effects. i was suggested to put a div over the video, I did it, but on Internet Explorer (i'm checking 9) is not working.

any known working suggestions?

this is my video:

var video1 = jwplayer('vid1').setup({
            'flashplayer': 'html/js/jwplayer5/player.swf',
            'id': 'playerVid1',
            'width': VIDPLAYER_CTRL.BIGVIDEO_WIDTH,
            'height': VIDPLAYER_CTRL.BIGVIDEO_HEIGHT,
            'file': VIDPLAYER_MODEL.MAIN_VIDEO['path'],
            'provider': 'http',
            'startparam': 'start',
            'controlbar': 'bottom',
            'image': VIDPLAYER_MODEL.MAIN_VIDEO['path_img'],
            wmode: 'transparent',
            'skin': 'html/js/jwplayer5/videoSkin/videoSkin.xml'
});

and this is my div where video is:

<div id="area1" class="aree">
        <div id="vid1_cover1" class="cover1big"></div>
        <div id="vid1_cover2" class="cover2big"></div>
        <div id="vid1"></div>
</div>

and this is the css to create a overlay div OVER the video:

  div.cover1big{
     background-color: transparent;
     position: absolute;
     width: 601px;
     height: 335px;
     top:0px;
     left:0px;
     z-index: 999;
  }
  div.cover2big{
     background-color: transparent;
     position: absolute;
     width: 576px;
     height: 26px;
     top:335px;
     left:25px;
     z-index: 999;
  }
1

There are 1 best solutions below

6
emaxsaun On

I would put the DIV over using the JW5 JS Plugin SDK.

http://www.longtailvideo.com/support/jw5/31166/building-javascript-plugins

There is a hello world example here which creates a div over the player and it works in both Flash and HTML5 modes.