My site plays a video clip using VideoJS. I’ve placed a div over the video window with absolute positioning. A jQuery statement causes the div to hide when the video is clicked to play. This works in Safari, Firefox, and Chrome which all use the <video> player but not in IE which plays the video in Flash, using flowplayer.

The jQuery statement:

1. $(document).ready(function(){
2.   $('div.video-js-box, object.vjs-flash-fallback').click(function() {$('.video_title').animate({opacity: 'hide'}, 1000)
3.   })});

I’ve tried selecting the <object> tag with and without the class name, as well as “flowplayer” and “flashvars”. Those last two don’t make much sense but I’m trying anything.

What is the correct selector to trigger an action in this case?

This is the HTML for the nested video players:

1. <div class='video_title' style='position:absolute;    margin-top: 205px;     margin-left: 45px;     width: 480px;   height: 35px;   background: #fff;              filter:alpha(opacity=80);         -moz-opacity:0.8;         -khtml-opacity: 0.8;         opacity: 0.8;          z-index:250;'> 

2.                 </div> <!-- video_title -->            <h6 class='video_title' style='position:absolute;    margin-top: 205px;         width: 462px;          left: 200px;   line-height: 17px;     font-size:14px;        text-transform:uppercase;         color: #000;   background: transparent;       padding: 9px 4px 9px 14px;             z-index:500;'>Video: The Retinal Specialist</h6>                <div class='video-js-box'>     <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->          <video class='video-js' width=480 height=272 controls preload poster='http://site_name/images/video/file_name.jpg'>                <source src='http://site_name/images/video/file_name.mp4' type='video/mp4; codecs='avc1.42E01E, mp4a.40.2''>               <source src='http://site_name/images/video/file_name.webm' type='video/webm; codecs='vp8, vorbis''>                <source src='http://site_name/images/video/file_name.ogv' type='video/ogg; codecs='theora, vorbis'> 

3.                <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->          <object class='vjs-flash-fallback' width='480' height='272' type='application/x-shockwave-flash'           data='http://newretinamd.com/flowplayer/flowplayer-3.2.4.swf' >                     <param name='movie' value='http://newretinamd.com/flowplayer/flowplayer-3.2.4.swf' />                   <param name='allowfullscreen' value='true' />                       <param name='wmode' value='transparent' />                   <param name='flashvars' value='config={"playlist":["http://site_name/images/video/file_name.swf.jpg", {"url": "http://site_name/images/video/file_name.mp4","autoPlay":false,"autoBuffering":true}]}" />                 <!-- Image Fallback. Typically the same as the poster image. -->                       <img src='http://site_name/images/video/file_name.jpg' width='480' height='264' alt='Poster Image'                      title='No video playback capabilities.' />              </object>      </video>       <!-- Download links provided for devices that can't play video in the browser. --> 

4.         <p class='vjs-no-video'><strong>      <a href='http://site_name/images/video/file_name.mp4'>Download Video</a></strong>     <a href='http://site_name/images/video/file_name.webm'>WebM</a>,     <a href='http://site_name/images/video/file_name.ogv'>Ogg</a><br>       <!-- Support VideoJS by keeping this link.    <a href='http://videojs.com'>HTML5 Video Player</a> by VideoJS -->      </p>    </div>