Video in jQuery and Fancybox (Local video file mp4 Instead of Youtube)

Question

I am successfully running a Youtube Video in Jquery FencyBox. But, I am unable to run a local MP4 Video File in Jquery FencyBox (this file exists in a folder)

Please tell me how can i run a local video file in JQUERY FENCYBOX (same as i am running a youtube video in FencyBox).

Following is the code i am using:

1). I AM USING THESE FILES(PLUGINS) :

jquery.fancybox-1.3.4.js AND jquery.fancybox-1.3.4.css

2). Successfully Playing video from Youtube in Fancy Box:

<div class="main">
    <h1>VIDEO Playing From YOUTUBE</h1>
    <p><a href="http://www.youtube.com/embed/WAZ5SmJd1To" class="youtube iframe">Watch this amazing YouTube video</a></p>
</div>

3). Now I am unable to play Local Video File MP4 in Fancy Box:

<div class="main">   
    <h1>Local Video File Playing</h1>
    <p><a href="example/video.mp4" class="youtube iframe" > My Local Video in Example Folder</a></p>         
</div>

Please suggest/guide/help.

score 12 · Answer 1 · edited May 23 '17 at 12:17

The issue is that most media objects require a player to run, either a (self-hosted) third-party software or a browser's plugin/extension, normally quicktime for MP4 videos.

In the case of youtube, they provide already with an embedded player so you don't have to worry about that but in the case of your local video(s), you still need to use an external player, let's say jwplayer (or any other of your preference.) Notice that fancybox doesn't include any video player.

So I would use the following html to link each video

<a class="fancybox" data-type="iframe" href="http://www.youtube.com/embed/WAZ5SmJd1To?autoplay=1" title="youtube">open youtube (embed mode)</a><br />
<a class="fancybox" data-type="swf" href="pathToPlayer/jwplayer.swf?file=pathToVideo/video.mp4&autostart=true" title="local video mp4">open local video</a>

Notice that I added a (HTML5) data-type attribute to indicate the type of content fancybox (v1.3.4) should handle. I used swf for your local video since I will be using a swf player (jwplayer.swf) regardless I am playing a mp4 video.

then you could use this script for any of them :

jQuery(document).ready(function($){
    $(".fancybox").on("click", function(){
        $.fancybox({
          href: this.href,
          type: $(this).data("type")
        }); // fancybox
        return false   
    }); // on
}); // ready

You can see a demo here http://www.picssel.com/playground/jquery/localVideojwPlayer_02oct13.html

NOTE: .on() requires jQuery v1.7+ but fancybox doesn't work with jQuery v1.9+, see this for further information. You could use jQuery v1.8.3 or apply the patch as in the referred post.

LAST COMMENT: this may not work in mobile devices. You may rather prefer to use a different player like mediaelements for cross-browser/cross-platform compatibility instead (or get jwplayer v6.x with legacy browsers fallback option)

Jinal Tandel · Answer 2 · 2016-04-25T12:46:57.070

6

This code helps you to run the local video file, make sure you've your .mp4 video file in your solution or else you can link the youtube video with anchor tag.

<head>
<script src="/fancybox/jquery.fancybox.js" type="text/javascript"></script>
<link href="/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $('#video a').fancybox({
                width: 640,
                height: 400,
                type: 'iframe'
            });
        });
    </script>
 </head>

<body>
<div id="video">
  <a href="new_video.mp4"><img src="/images/video_coverpage.jpg" alt="" /></a>       
</div>
</body>

edited Apr 25 '16 at 12:46

answered Apr 19 '16 at 13:53

Jinal Tandel

59
1
4

1

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Tony Babarino Apr 19 '16 at 14:20

score 0 · Answer 3 · answered Mar 16 '17 at 07:13

Jinal answer with working example.

<head>
<script src="/fancybox/jquery.fancybox.js" type="text/javascript"></script>
<link href="/fancybox/jquery.fancybox.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $('#video a').fancybox({
                width: 640,
                height: 400,
                type: 'iframe'
            });
        });
    </script>
 </head>

<body>
<div id="video">
  <a href="http://media.gettyimages.com/videos/giant-manta-rays-video-id618487251">Click Here</a>       
</div>
</body>

Video in jQuery and Fancybox (Local video file mp4 Instead of Youtube)

3 Answers3

Linked