2

I'm trying to get youtube videos to start on hover. It will pause (not stop) when the user hovers over another video...

I am stuck on the hover command. Can someone help me work it out please?

The page has 16 videos, this is the working code from the jsfiddle that contains 3 videos as an example.

http://jsfiddle.net/sebwhite/gpJN4/

VIDEO:

<iframe id="player" width="385" height="230" src="http://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe>

JAVASCRIPT:

function onYouTubeIframeAPIReady() {
 player = new YT.Player('player', {
     events: {
         'onStateChange': onPlayerStateChange
     }
 });

onYouTubeIframeAPIReady();
function onPlayerStateChange(event) {
 if (event.data == YT.PlayerState.PLAYING) {
     player1.pauseVideo();
     player2.pauseVideo();
 }
Florent
  • 12,310
  • 10
  • 49
  • 58
seb
  • 23
  • 1
  • 1
  • 4
  • 1
    Hi Seb, try this link http://stackoverflow.com/questions/15398745/how-to-start-a-youtube-video-from-mouseover-image-click – Phil Dec 20 '13 at 15:24
  • Hi @Phil, I specifically don't want it to start on click, or am I completely missing the point? My brains gone into overdrive over this and I don't know why I can't figure it out. – seb Dec 20 '13 at 15:45
  • I suppose you could draw a transparent div over the top of the video player and stop clicks that way? – Phil Dec 20 '13 at 15:46
  • I'm not opposed to stopping clicks - I just want to play a video on mouseover, people can click to pause or double click to fullscreen it if they want... – seb Dec 20 '13 at 16:18
  • In that case it looks like Pauls answer below does that? – Phil Dec 20 '13 at 16:19

1 Answers1

9

UPDATED FIDDLE

Try this:

 var $$ = function(tagname) { return document.getElementsByTagName(tagname); }
    
 function onYouTubeIframeAPIReady() {
     var videos = $$('iframe'), // the iframes elements
         players = [], // an array where we stock each videos youtube instances class
         playingID = null; // stock the current playing video
     for (var i = 0; i < videos.length; i++) // for each iframes
     {
         var currentIframeID = videos[i].id; // we get the iframe ID
         players[currentIframeID] = new YT.Player(currentIframeID); // we stock in the array the instance
         // note, the key of each array element will be the iframe ID
         
         videos[i].onmouseover = function(e) { // assigning a callback for this event
             if (playingID !== currentHoveredElement.id) {
               players[playingID].stopVideo();
             }
             var currentHoveredElement = e.target;
             if (playingID) // if a video is currently played
             {
                 players[playingID].pauseVideo();
             }
             players[currentHoveredElement.id].playVideo();
             playingID = currentHoveredElement.id;
         };
     }
    
 }
 onYouTubeIframeAPIReady();

Fiddle:

http://jsfiddle.net/gpJN4/3/

Paul Rad
  • 4,820
  • 1
  • 22
  • 23
  • Call me an idiot, but in the context of the code I have already / the scenario of having more than one video? Sorry, just trying to get my head around it. – seb Dec 20 '13 at 16:16
  • 1
    The only problem with this is that the videos don't pause. I'm trying to get it so you can roll over the videos and the video your mouse is on will play until you roll onto another video. – seb Dec 20 '13 at 21:22
  • That's brilliant. It works brilliantly, ALTHOUGH (and don't hate me) but I have found a way for it not to work. If you set one of the videos to autoplay, then when you hover on something else they both play. Is there a way to add support to pause autoplaying videos? – seb Dec 22 '13 at 01:28