Autoplay youtube video on hover/mouseover

Question

Я пытаюсь воспроизвести видео youtube для автоматического воспроизведения, когда тег iframe находится в фокусе. Пробовал следующее, но он не работает. Ошибка с моим jquery? Я хочу добавить & autoplay = 1 в src iframe, когда это фокус.

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/