Question

Fancy Box: http://fancybox.net/

Video JS: http://videojs.com/

Effect I’m going for: http://flowplayer.org/demos/tools/overlay.html click the “Open OverLayed video”.

I want to do it in FancyBox and Video JS for HTML 5 video w/ flash fallback. Is there a way to set that when the window opens, we could have it auto play the HTML 5 video?

Adam

Answer 1

facny box will allow you to load an iframe as it’s contents, as far as i know that is the only way to accomplish what you are asking with the specified tools

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    $("#image").live('click',function(){
        $.fancybox({
        'width'             : '75%',
        'height'            : '75%',
        'autoScale'         : true,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'iframe',
        'href'              : 'video.html'
        });
    });
});
</script>

 <div id="wrapper">
     <div id="image">
         <img height='480px' src='images/image.jpg'>
     </div>
 </div>

And your video.html page needs to have the videojs code, I only provided the mp4 version of the video in the example since this code is for an iPad web app that I use. Notice the autoplay argument in the video tag.

  <!-- Begin VideoJS -->
  <div class="video-js-box">
    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
    <video id="example_video_1" class="video-js" width="100%" height="95%" controls="controls" preload="auto" autoplay poster="images/image.jpg">
      <source src="video/videoSource.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
         <!-- Image Fallback. Typically the same as the poster image. -->
        <img src="images/image.jpg" width="640" height="264" alt="Poster Image"
      title="No video playback capabilities." />
      </object>
    </video>
  </div>
  <!-- End VideoJS -->