December 8, 2015
YouTube Pop-up in fancybox with Autoplay
WD&S share a wonderful tutorial Responsive YouTube Videos with fancyBox. Using their code, I added it to be set to autoplay when the box pops up as well as using the YouTube image automatically. So, assuming you have jQuery loaded, you just need a few things and a YouTube identifier to easily set this up. What is a YouTube identifier? Consider the YouTube video https://www.youtube.com/watch?v=ZFHeoYv_qms. The identifier is ZFHeoYv_qms. You will also need the following:
- fancybox script fancybox/jquery.fancybox-1.3.4.pack.js
- fancybox stylesheetfancybox/jquery.fancybox-1.3.4.css
- the video script fancybox/video.js
- red play button fancybox/play.gif
- fancybox images fancybox/fancybox.png
Here's an example followed by my code, which extends their code:
<script src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" />
<script src="fancybox/video.js"></script>
<div style="text-align:center">
<div id="ZFHeoYv_qms"></div>
<a class="video" style="text-decoration: none;" href="https://www.youtube.com/watch?v=ZFHeoYv_qms&autoplay=1">
<img src="http://img.youtube.com/vi/ZFHeoYv_qms/0.jpg" width="242" />
<img src="fancybox/play.gif" style="position: relative; width:auto; background:transparent;top: -84px; left: -140px;"/>
</a>
</div>
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" />
<script src="fancybox/video.js"></script>
<div style="text-align:center">
<div id="ZFHeoYv_qms"></div>
<a class="video" style="text-decoration: none;" href="https://www.youtube.com/watch?v=ZFHeoYv_qms&autoplay=1">
<img src="http://img.youtube.com/vi/ZFHeoYv_qms/0.jpg" width="242" />
<img src="fancybox/play.gif" style="position: relative; width:auto; background:transparent;top: -84px; left: -140px;"/>
</a>
</div>