Воспроизведение встраиваемого видео youtube JS

Question

Я внедряю видео с youtube с помощью тега iframe, но не получаю доступа к функциональности воспроизведения объекта. Вот как я загрузке объекта:

<iframe id="player" type="text/html" width="640" height="390" 
    src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=http://example.com" 
    frameborder="0"> 

Я ссылается на API-интерфейсы, но я не очень понимаю, как получить доступ к функции воспроизведения/паузы. Я попытался с помощью JQuery следующим образом, но захваченный объект не имеет желаемые атрибуты:

vid = $('#player') 
vid.playVideo() // doesn't work 

Я также попытался использовать swfsobject следующим образом:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> 
<script type="text/javascript"> 

    var params = { allowScriptAccess: "always" }; 
    var atts = { id: "myytplayer" }; 
    swfobject.embedSWF("http://www.youtube.com/embed/ngf03kCRw3s", 
         "ytapiplayer", "425", "356", "8", null, null, params, atts); 

    </script> 

Однако, на ничего не появляется (и в консоли нет ошибок). С уважением, Спасибо,

Answer 1

Простой способ воспроизведения встроенного видео YouTube с помощью jQuery (и JS) заключается в добавлении параметра «autoplay = 1» в атрибут src iframe. В вашем случае код будет выглядеть примерно так:

$("#player")[0].src += "&autoplay=1"; 

Другой пример по Martin Wolf:

$(document).ready(function() { 
 
    $('#play-video').on('click', function(ev) { 
 
    
 
    $("#video")[0].src += "&autoplay=1"; 
 
    ev.preventDefault(); 
 
    
 
    }); 
 
});

body { 
 
    padding: 30px; 
 
} 
 

 
a { 
 
    display: inline-block; 
 
    margin-bottom: 20px; 
 
    color: #000; 
 
    font-family: Arial, sans-serif; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="play-video" href="#">Play Video</a><br /> 
 
    
 
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>

И это все. Видео начнет воспроизводиться. Если кому-то нужно решение в Vanilla JS, пожалуйста, оставьте комментарий, и я вернусь, чтобы обновить ответ, когда у меня есть дополнительное время.