Lightbox and slider problems, YouTube

[damian]

Hi,

I’ve had swagger installed for quite a while now (www.gingermagic.com) and use the lightbox for most of my videos. I’m in the process of updating to the latest version of swagger (doing it on a local version first) and have a couple of questions.

Autoplay
I’m SURE that prettyPhoto youtube videos USED to autoplay as soon as they were clicked. They now don’t! They need clicking to open them up in lightbox, and clicking again to play them.
This is the same with the new lightbox, Magnific Popup
This seems to be a step backwards! Is there any way to get either prettyPhoto or Magnific Popup autoplaying the youtube videos once they have opened up the lightbox???

Related videos
I’m also sure that I used to be able to stop YouTube ‘related videos’ showing buy using rel=0
eg
<a class="video" title="What if you could really do magic? - Damian Surr - GingermagicTV " href="http://www.youtube.com/watch?v=3eMxA28hd88?rel=0;?width=1024&amp;height=576" rel="themeblvd_lightbox">
<img class="size-full wp-image-2696 aligncenter" alt="What if you could really do magic? Free Coke - Damian Surr" src="http://localhost/gm-clone-wp/wp-content/uploads/GingermagicTV15-FreeCoke.jpg" width="500" height="305" /></a>
However, now this is not working. Related videos are showing!
Again, this is the same for Magnific Popup
Is there any way to stop either of the light boxes showing related videos???

Videos in sliders
This is not related to lightboxes, but I’m also having problems with videos in sliders. The slider seems to be moving onto the next slide even if a video had started playing.
What’s going on here? That never used to happen.

Looking forward to hearing your replies.

Thanks,
Damian

Topic

[Jason Bobich]

Hello Damian,

I’m SURE that prettyPhoto youtube videos USED to autoplay as soon as they were clicked. They now don’t! They need clicking to open them up in lightbox, and clicking again to play them.
This is the same with the new lightbox, Magnific Popup
This seems to be a step backwards! Is there any way to get either prettyPhoto or Magnific Popup autoplaying the youtube videos once they have opened up the lightbox???

First off, YouTube videos should already play automatically when they open up. See the post titled “YouTube Video” on this example page and click to open the video:

http://demoblvd.com/themes/swagger/page-templates/post-grid-3-columns/

I was actually just playing with a bit on my end locally, and I can’t reproduce any scenario where the YouTube video doesn’t automatically play when Magnific Popup opens up.

Second, if you want prettyPhoto back, you can install the following plugin. With prettyPhoto, YouTube videos also played automatically when opened.

http://wordpress.org/plugins/theme-blvd-prettyphoto/

But honestly I think Magnific Popup is a huge step forward for the framework. It’s an up-and-coming, open-sourced plugin by a committed author that really knows what he’s doing and is putting a lot of time into keeping it going and improving it. prettyPhoto was great, but has essentially stopped being worked on and is becoming outdated as responsive and retina-support are a must now.

Is there any way to stop either of the light boxes showing related videos???

There’s nothing you can pass through the URL that’ll do this, but if you wanted to bind your own instance of Magnific Popup from your child theme’s javascript file, you’d do it like this:

jQuery(document).ready(function($) {

	$('.my-youtube-lightbox').magnificPopup({
		type: 'iframe',
		iframe: {
			patterns: {
			    youtube: {
					src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0'
			    }
			}
		}
	});

});

Then you could just do something like:

<a href="http://www.youtube.com/watch?v=es_0xnQnvtM" class="my-youtube-lightbox" title="Title Here">
  <img src="thumb.jpg" />
</a>

This is not related to lightboxes, but I’m also having problems with videos in sliders. The slider seems to be moving onto the next slide even if a video had started playing.
What’s going on here? That never used to happen.

The YouTube video is in an externally embedded iframe; so there’s no way it’s communicating with the theme. From Swagger v1 to v2, nothing has changed in this regard. This is what the pause/play functionality of the slider is for. In your slider options you can configure the slider to pause on hover. The idea there is this makes it not possible for the user to move the mouse over the slider to play the YouTube video without pausing the slider.

But the literal play/pause action of that YouTube video doesn’t have (and never did have) any bearing on whether the slider is going to play/pause. There’s just no way for the two to communicate in this setup.

[damian]

Thanks for the quick reply Jason,

I don’t know what was going on with my machine yesterday! Neither popup was autoplaying in either the live version of the site or my local clone. Now all is fine again!

Also, PrettyPhoto is able to NOT SHOW ‘related videos’ without any need for extra code, so I’ll stick with that lightbox plugin once I’ve updated the theme. I only put videos in lightboxes anyway and they go ‘full screen’ on mobile devices as it is so I can’t see any benefit in me using Magnific Popup.

Thanks for the extra information regarding YouTube in the sliders. I thought it used to auto-pause when a video was being played, but obviously not.

Thanks again,
Damian

[Author]

Replies