2017-11-15 3 views
1

にユーチューブの動画を再生し、私はちょうど私がここにフィドルを持っており、それが仕事を得ることができないはホバー

を推移した場合にのみユーチューブの動画を再生する必要があります。 https://jsfiddle.net/rhr5p0pg/2/

更新フィドル

$(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/4/

は、今ではすべてを果たしているし、あなたのマウスが離れたときには、そのoriginialビデオ

+0

jqueryがありません。 (JavaScript設定をクリックしてください) – less

+0

申し訳ありませんが、私のフィドルを修正したことを忘れました –

+0

こんな感じですか? https://jsfiddle.net/rhr5p0pg/3/ – less

答えて

1

あなただけの最初のビデオのURI(SRC)を格納します。

何この

$(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/

+0

wow 、これは動作します!ありがとうございました –

+0

ところで、私はビデオの下の空白を取り除くことができますか? –

+0

iframeでちょっと遊んでました.ssss https://jsfiddle.net/rhr5p0pg/8/ – less

0

あなたは例hereに従って、インラインフレームYouTubeのAPIを使用してビデオを追加する必要があります。

このjQueryのコードをお使いのプレーヤーとの使用を初期化します。

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

//Blur Pause 

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