FancyBox for WordPress
Cannot get YouTube videos to work (7 posts)

  1. mauricen
    Posted 3 years ago #

    Cannot get fancy box for wordpress to play YouTube videos. I have been through this entire support blog with no answers. Can someone pleas epost a working example?

    Here is my non-working one... it just puts the "working" icon up that spins and spins...

    <a href="http://www.youtube.com/embed/kt-sRZ-O6qI?fs=1&autoplay=1&loop=1" class="fancybox"><img src="/images/video-still.jpg" width="192" height="120" border="1"/></a>

    Click it... spinning icon appears... nothing plays.

    Can ANYONE address this? Show an example that works?


  2. Dani-Girl
    Posted 3 years ago #

    Hi looking for a solution as well. I tried the tip found here:


    but it doesn't work. the link opens in a new window and causes my other Jquery calls to fail.

  3. stephlynnmor311
    Posted 3 years ago #

    I'm having the same problem. It pops-up fine but spins and spins.

  4. stephlynnmor311
    Posted 3 years ago #

    Ah! I figured it out. It was the video URL I was using. I had the embed URL, when I grabbed it from the url bar, that one worked just fine. Hope that helps!

  5. lclare
    Posted 2 years ago #

    I tried the suggestion above of adding the url from the url bar and not the embed link, but my working icon is still spinning and spinning. Would you mind providing a copy of the html that made it work for you?

    Here's what I have:
    <a href="http://www.youtube.com/watch?v=Hjpn9k6Ye0o" class="fancybox"><img src="http://i1.ytimg.com/vi/Hjpn9k6Ye0o/mqdefault.jpg" width="192" height="120" border="1"/></a>

  6. andy_woz
    Posted 2 years ago #

    Anyone requiring this try turning on Extra FancyBox Calls (Advanced) and adding the following jQuery call . Then simply assign your href the .video class.

    jQuery(document).ready(function() {
    	jQuery(".video").click(function() {
    			'padding'		: 0,
    			'autoScale'		: false,
    			'transitionIn'	: 'none',
    			'transitionOut'	: 'none',
    			'title'			: this.title,
    			'width'			: 640,
    			'height'		: 385,
    			'href'			: this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
    			'type'			: 'swf',
    			'swf'			: {
    			'wmode'				: 'transparent',
    			'allowfullscreen'	: 'true'
    		return false;
  7. sivertsons
    Posted 2 years ago #

    andy_woz, your solution worked perfectly only problem is I can't figure out how to make this solution responsive. Any suggestions?

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • FancyBox for WordPress
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic