自動再生youtube video on hover/mouseover

Question

iframeタグがフォーカスされているときに自動再生するためにYouTubeのビデオを再生しようとしています。次のように試してみましたが、動作していません。私のjqueryでエラーが発生しましたか？ iframeのsrcにフォーカスがあるときに& autoplay = 1を追加します。

HTML： -

<div class="vid-wrapper" > 
    <iframe width="100%" height="100%" id="video1" src="https://www.youtube.com/embed/bxgorUGjCIw?rel=0" frameborder="0" allowfullscreen scrolling="auto" ></iframe> 
</div> 

のCss： -

.vid-wrapper{ 
width: 100%; 
position: relative; 
padding-bottom: 56.25%; 
height: 0; 
z-index:-20; 
} 
.vid-wrapper video, .vid-wrapper iframe { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
z-index:-1; 
} 

のjQuery： -

$(document).ready(function() { 
$("#video1").mouseenter(function(){ 

    $(this).attr("src",$(this).attr("src") + "&autoplay=1"); 
}); 

$("#video1").mouseleave(function(){ 
    var src= $(this).attr("src"); 
    var arr_str = src.split("&"); 
    $(this).attr("src",arr_str[0]); 
    }); 
}); 

任意のヘルプ？前もって感謝します。

Answer 1

実際にあなたが本当にsrc属性を変更したいのですが、そのためのyoutube's api使用することはありません。ここで

The snippet will not work due to cross-origin problems (specifically in stackoverflow) but the code works.

var player; 
 
function onYouTubeIframeAPIReady() { 
 
    player = new YT.Player('player', { 
 
    height: '390', 
 
    width: '640', 
 
    videoId: 'M4Xrh8OP1Jk' 
 
    }); 
 
} 
 

 
$(document).on('mouseover', '#player', function() { 
 
    player.playVideo(); 
 
}); 
 
$(document).on('mouseout', '#player', function() { 
 
    player.pauseVideo(); 
 
});

<script src="//www.youtube.com/player_api"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="player"></div>

する作業jsfiddleです：
https://jsfiddle.net/rurc8rb9/