In a previous post I showed how to use fancyBox with YouTube videos. Responsive website layouts are the hottest thing on the web right now, which has left developers looking for solutions for responsive sliders and galleries. Luckily a new version of fancyBox was recently released, one of the major updates being the ability to resize images or videos depending on the screen size!
Old FancyBox video / browser large.
Old FancyBox video / browser small (and cutoff). 🙁
New FancyBox video / browser large.
New FancyBox video / browser small (and auto resized!). 🙂
In the demo file you can download above you’ll see links to Fancybox CSS in the header and Fancybox JS in the footer, add these to your page. The actual link looks like this:
<a class="various fancybox.iframe" title="Selena Gomez x Marshmello - Wolves (Venomisto Remix)" href="http://www.youtube.com/embed/FbZ7Krkxht8?autoplay=1"><img src="thumbnail.jpg"></a>
The title becomes the caption under the optioned video. Replace “FbZ7Krkxht8” with your YouTube video number, and create a thumbnail image to embed on your page.
Note: The new version of fancyBox has different licensing, be sure to visit the website for full details to make sure you are using it correctly, and for all the customization details.