tech @ Beacon Deacon

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 The identifier is ZFHeoYv_qms. You will also need the following:

  1. fancybox script fancybox/jquery.fancybox-1.3.4.pack.js
  2. fancybox stylesheetfancybox/jquery.fancybox-1.3.4.css
  3. the video script fancybox/video.js
  4. red play button fancybox/play.gif
  5. 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="">
<img src="" width="242" />
<img src="fancybox/play.gif" style="position: relative; width:auto; background:transparent;top: -84px; left: -140px;"/>