0

I'm having an issue which has been bugging me for the past few days. I (at least I think so) implemented Fancybox correctly, and it works perfectly with images. However whenever I try to open a video with Fancybox it opens up the fancybox style loading screen, but does not play the video itself. It just keeps loading for about a minute and then displays: "The file or directory could not be found". Like this. My code is like this: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css">

    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jquery.fancybox.js"></script>
    <script src="js/jquery.fancybox-media.js"></script>

</head>

<body>

    <script type="text/javascript">
        $(document).ready(function() {

            $(".fancybox-media").fancybox({
                    helpers : {
                        media : {}
                    }
                });

        });
    </script>

    <a class="fancybox-media" href="http://vimeo.com/36031564">Vimeo</a>

</body>

I'm 100% sure I'm pointing to the right path for the js and css, to the newest versions. What am I missing here? Why doesn't this just work, just like the pictures?

user1910584
  • 75
  • 1
  • 9
  • Refer http://stackoverflow.com/questions/2542252/open-youtube-video-in-fancybox-jquery – Shreyos Adikari Mar 19 '14 at 21:46
  • Thanks for the reply, but unfortunately this didn't solve my problem. This is about the old version of fancybox which didnt include media helpers. The current version does, it does however still not work correctly in my case, as I stated in the op. – user1910584 Mar 19 '14 at 21:51

2 Answers2

1

Your code is correct, as you can see from this fiddle.

My guess is that you're opening the HTML file locally in your browser, and it's using the file:/// protocol. That's causing it to search for the video here rather than online: 

file://player.vimeo.com/video/36031564?autoplay=1&hd=1&show_title=1&show_byline=1&show_portrait=0&fullscreen=1

It should work fine as long as you load this page using a web server.

axelstudios
  • 336
  • 3
  • 7
0

Turns out this problem only occurs locally... When I host the exact same code online it works. I absolutely have no clue why, but it finally works.

user1910584
  • 75
  • 1
  • 9