Responsive fancyBox Pop-up Video with modifications by Jamie Johnson
Jamie Johnson
February 2-3, 2017
With the use of fancyBox, one can make responsive pop-up videos with plenty of options. This works for different types of videos as seen in my examples below:
YouTube
Vimeo
The Code
The script and CSS for both examples are the same (and only needs to be on the page one time). Make sure to download fancyBox from the link above. Here's the code (with links to the source files. Note that some paths may need to change.):
<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<!-- Add fancyBox -->
<link href="/fancybox/source/jquery.fancybox.css?v=2.1.6" media="screen" rel="stylesheet" type="text/css"/>
<script src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.6" type="text/javascript"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" media="screen" rel="stylesheet" type="text/css"/>
<script src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5" type="text/javascript"></script>
<script src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6" type="text/javascript"></script>
<link href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" media="screen" rel="stylesheet" type="text/css"/>
<script src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7" type="text/javascript"></script>
<!-- The following custom script does not come with the fancyBox download should be the last script called. It is an internal script as opposed to external in the fancyBox examples, but I made it external to package it -->
<script src="/fancybox/custom.js" type="text/javascript"></script>
<!-- The following custom CSS is my own CSS and does not come with the fancyBox download -->
<link href="/fancybox/custom.css" rel="stylesheet" type="text/css" />
And the markup for the two examples is almost identical. The only difference is the URL for the video. Here's the YouTube markup:
<div style="text-align:center;display:inline-block;">
<img alt=" " src="/fancybox/custom-images/batman-revised-with-play-button.png" style="max-width: 400px; width: 100%;" />
</div>
</a>
And here's the Vimeo markup:
<div style="text-align:center;display:inline-block;">
<img alt=" " src="/fancybox/custom-images/batman-revised-with-play-button.png" style="max-width: 400px; width: 100%;" />
</div>
</a>
Again, note that some paths may need to change. Also, the "custom-images" directory in the markup above is not part of fancyBox. I added it to be a place where I put the clickable image with play button; i.e., you will need to provide a relevant image for the video.
What about images without a playbutton?
What if you want to use an image and then hover a play button over it instead of having to use a graphics program to add the playbutton as part of the video thumbnail image? While the scripts and CSS calls above remain the same, the markup is different and there is additional CSS, which I have added to the custom.css file linked above. Here's the example:
Here's the code with my modifications thanks to the markup at http://jsfiddle.net/twfJh/2/:
<div class="itemsContainer">
<a class="fancybox fancybox-media fancybox.iframe" href="//vimeo.com/47477352">
<img src="/fancybox/custom-images/batman-revised.png" style="max-width: 400px; width: 100%;" />
</a>
</div>
</div>
The above example uses more standard markup (than even the source) and my custom.js script handles the rest. Note that, one needs to make sure s/he downloads play-button-dark.png to have the hovering play button image.
