I can't figure out why my Vimeo videos are not appearing in a Shadowbox.
I have followed the steps I know to be the simplest, which involve copying the example directly from the github page and then updating the shadowbox paths to match the locations on my server (for the .js and .css files).
When I click on the video link, I anticipate the video showing up in the Shadowbox.
However, instead of seeing the video or the box, the page simply goes dark (indicating that the shadowbox is attempting to function), but nothing appears on the screen.
To test whether a simple image would work, I added an image link to the example page. It did work successfully.
The code I used is sourced from: https://github.com/mjijackson/shadowbox/blob/master/examples/vimeo.html
This code should function similarly to the Vimeo link near the bottom of this webpage:
You can view my functioning page at:
Here is the full code for the sample page I am trying to make work: (Thank you in advance for any assistance)
<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>