Vimeo videos not showing up in ShadowBox

StackOverflow https://stackoverflow.com/questions/19372301

Pregunta

I'm at a loss for why my Vimeo videos aren't showing up in a Shadowbox.

I think I have gotten to the simplest point I know how to do, which is to copy and paste the example straight from the github page and then change the shadowbox paths to the correct places on my server (for the .js and .css files).

When I click on the link to the video, I expect the video to display in a shadowbox.

Instead, the page just goes dark (so I know shadowbox is TRYING to do something), but no video, or box appears on the screen.

I added a simple image link to the example page just to test that a simple image will work. It does.

My example code is from: https://github.com/mjijackson/shadowbox/blob/master/examples/vimeo.html

The code is supposed to work like the Vimeo link towards the bottom here: http://www.shadowbox-js.com/index.html

My actual working page can be found at: http://zanezmiller.com/hidden/video-test.html

Here is the complete code to the sample page I am attempting to get to work: (Thanks in advance for any help)

<html>
<head>
<link rel="stylesheet" type="text/css" href="/shadowbox/style.css">
<link rel="stylesheet" type="text/css" href="/shadowbox/shadowbox.css">
<script type="text/javascript" src="/shadowbox/shadowbox.js"></script>

<script type="text/javascript">
   Shadowbox.init({}, function() {
      Shadowbox.setup('a[title="Egypt/Lebanon Montage"]', {
         height:     360,
         width:      640,
         flashVars:  {
            clip_id:  "7058755",
            autoplay: "1"
         }
     });

     Shadowbox.setup('a[title="Shows Images Work"]', {
        height:     360,
        width:      640
     });
 });
</script>
</head>
<body>
    <p>This example demonstrates how to display a Vimeo video in Shadowbox.</p>
    <p><a href="http://vimeo.com/moogaloop.swf" title="Egypt/Lebanon Montage">Click Here</a></p>
    <p id="foot">This file is part of <a href="http://shadowbox-js.com/">Shadowbox.js</a>.</p>    
    <p><a title="Shows Images Work" href="http://upload.wikimedia.org/wikipedia/en/thumb/d/dd/G2Cloud_eso1151a.jpeg/200px-G2Cloud_eso1151a.jpeg">This shows images work</a></p>


</body>
</html>
¿Fue útil?

Solución

Glad it worked, I'll re-word the comment so random visitors would find it helpful as well. :)

Make sure that you build the shadowbox library with the appropriate options otherwise the specific shadowbox mode you want to use works. See: http://shadowbox-js.com/download.html

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top