Home/ Questions/Q 8440761
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T08:22:53+00:00

I’m building a lightbox and have reached adding support for flash and videos. I’ve

  • 0

I’m building a lightbox and have reached adding support for flash and videos. I’ve never had any demands or need for video, so honestly don’t know where to begin. I do know I have to be able to serve different video formats for different browsers, but don’t know how to approach this. I’m also hoping to have this work in “non-modern” browsers. The tutorials and questions I’ve found are very vague any typically result in “try using this plugin”. Perhaps someone could help by explaining how i would go about loading a video that would be browser compatible, and possibly the video formats i should be supporting? Or a link 🙂 thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I just did the same thing. I used a combination of Fancybox and Video for Everybody.

    Basically, the idea behind Video for Everybody is that you use the HTML5 video tag with an embedded flash video player for browsers that do not support HTML5 video. For the embedded flash player, I used JWPlayer.

    And then you just make something like <a href="#videoPlayer" class="video_link">Play Video</a> and point Fancybox at the link. Voila, you’ve got a video in an Fancybox (which is about the same thing as Lightbox).

    For cross-browser compatibility, you should offer the file in MP4 (using H.264 codec) and WebM or Ogg. Older browsers that do not support HTML5 videos will use the flash player fallback with the MP4 file anyways.

    One thing to keep in mind with your MP4 file is that often the moov atom is placed at the end of the file, so the file cannot start playing until it has fully downloaded. Use a tool like qt-faststart to move it to the beginning of the file, allowing it to start playing before fully downloaded.

    Example:

    <html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("a.video_link").fancybox();
        });
    </script>
</head>
<body>
    <a href="#videoPlayer" class="video_link">Play video</a>
    <video width="640" height="360" controls id="videoPlayer">
        <source src="__VIDEO__.MP4" type="video/mp4" />
        <source src="__VIDEO__.OGV" type="video/ogg" />
        <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
            <param name="movie" value="__FLASH__.SWF" />
            <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
            <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" />
        </object>
    </video>
</body>
</html>
    • 0