CODEWITHSUNDEEP
jqueryyoutube
artparks
artparks

Reputation: 761

jQuery cycle and embedded Youtube vids - pause when video plays

I'm using cycle to rotate various bits of content on the front page of a site, some of which needs to be youtube videos. I want the cycle to pause when the user plays the video, but am struggling with it.

The example here: How do I attach a jQuery event handler to a YouTube movie? no longer seems to work, are there any more recent techniques anyone is aware of? Google isn't turning much up except the few posts on here I've seen about it, none of which seem to work any more (I assume google have changed the YT API since they were made..)

Any help appreciated!

Upvotes: 1

Views: 4488

Answers (2)

Rich
Rich

Reputation: 1

You want to pause the Cycle (on hover), then play the video (on click).

Simply layered an empty div (#slidestop) over the video (matching the CSS attributes of the video container so it's the same size), and added the following code, and it works like a charm!

 $('#slidestop').hover(function() { 
 $('#homeslides').cycle('pause'); 
 $('#slidestop').hide();
 });

Upvotes: 0

rowatt
rowatt

Reputation: 421

I had a similar problem but for Vimeo. The solution I came up with should work for YouTube or any similar kind of embedding.

For the carousel, just display the video thumbnail image. Both YouTube and Vimeo provide a straightforward way to get the thumbnail at various resolutions (e.g. How do I get a YouTube video thumbnail from the YouTube API? for YouTube). Make sure each image has a (unique) id from which you can get all the details you will need for embedding the video (e.g. you could just use the YouTube ID as the HTML ID).

Attach a jQuery click handler to the image. The click handler gets the relevant info for what video to display from the image's ID, hides the carousel container and inserts the relevant code to display the video in another element with the same position as the carousel.

For example:-

<div id="carousel">
  <img src="youtubethumbnailurl1" id="1234" />
  <img src="youtubethumbnailurl2" id="2345" />
  <img src="youtubethumbnailurl3" id="3456" />
</div>

<div id="video"></div>


<script type="text/javascript">
  jQuery( function($) {
    $('#carousel img').click( function(e){
      e.preventDefault;
      $('#carousel').hide();
      var video_id = $(this).attr("id");
      $('#video').html( vid_iframe(video_id) ).show();
      return false;
    });

    function vid_iframe( video_id ) {
      return "<iframe src='youtubeurl'+video_id+'youtubeParameters'?</iframe>";
    }
  });
</script>

You'd need to add appropriate handlers to close the video and return to the carousel if required.

It's a bit convoluted, but is applicable to just about any kind of embed and also gives lots of flexibility for how things are displayed (e.g. in my case, the thumbnails had to be much smaller than the actual video when played).

Upvotes: 1

Related Questions