CODEWITHSUNDEEP
jqueryyoutube
Francis Alvin Tan
Francis Alvin Tan

Reputation: 1087

Play youtube video on hover

I just need to play the youtube video only when hovered

I have here a fiddle and can't get it to work.

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

      var playersrc = jQuery(iframe).attr('src');

          $('div').hover(function(){
          $('iframe').attr('src',playersrc+'&autoplay=1');
      }, function(){
          $('iframe').attr('src',playersrc);
      });
  });       
});

https://jsfiddle.net/rhr5p0pg/2/

updated fiddle: https://jsfiddle.net/rhr5p0pg/4/

now it plays all and when your mouse leaves the it does not go back to its originial video

Upvotes: 1

Views: 14922

Answers (4)

less
less

Reputation: 711

You store just the first video uri (src).

What about something like this

$(document).ready(function(){
  var nowPlaying = "none";
      $('div').hover(function(){
          nowPlaying = $(this).find('iframe').attr('src');
          $(this).find('iframe').attr('src',nowPlaying+'&autoplay=1');
      }, function(){
          $(this).find('iframe').attr('src',nowPlaying);
      });
});

https://jsfiddle.net/rhr5p0pg/5/

Upvotes: 2

Gorr1995
Gorr1995

Reputation: 258

If someone has the issue that on hover doesn't play it's because of the Autoplay policy was changed. You need to set mute to your video. https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Upvotes: 0

victor_reiner
victor_reiner

Reputation: 105

You need to add the video using Iframe Youtube Api, follow the examples here.

Initialize your player and the use this Jquery code:

//Hover play
$('iframe').on('mouseover',function(){
    player.playVideo();
});

//Blur Pause

$('iframe').on('mouseout',function(){
    player.playVideo();
});

Upvotes: 1

Ralph Janssen
Ralph Janssen

Reputation: 116

It is easier to use the Youtube video API. With the API you have more controle over the videos.

https://developers.google.com/youtube/iframe_api_reference

Upvotes: 0

Related Questions