Trigger в IFrame Youtube видео через диву

Question

Я понятия не имею, как эти кнопки в HTML коде ниже могут спровоцировать IFRAME (в видео) в моем файле JS (и/или через игру DIV)

HTML код :

<div style="text-align:center"> 
    <button onclick="playPause(); return false;">Play/Pause</button> 
    <button onclick="makeBig(); return false;">Enlarge</button> 
    <button onclick="makeSmall(); return false;">Shrink</button> 
    <button onclick="makeNormal(); return false;">Default</button></div> 

<div class="video"> 
    <div class="play"><i class="icon-play"> ► </i></div> 
    <img src="http://i.imgur.com/9EcjYs8.jpg" data-video="http://www.youtube.com/embed/OgAr66JbvtU?autoplay=1"/> 
</div> 

JS КОД:

$(document).ready(function(){ 

$('.play').click(function() { 
    video = '<iframe width="600" height="375" frameborder="0" src="' + $('img').attr('data-video') + '"></iframe>'; 
    $('.video').replaceWith(video); 
}); 
}); 

    var myVideo = $('video'); 
function playPause() 
{ 
if (myVideo.paused) 
    myVideo.play(); 
else 
    myVideo.pause(); 
} 
function makeBig() 
{ 
myVideo.height=487.5; 
myVideo.width=780; 
} 

function makeSmall() 
{ 
myVideo.height=262.5; 
myVideo.width=420; 
} 

function makeNormal() 
{ 
myVideo.height=375; 
myVideo.width=600; 
} 

И если вы нужен CSS:

body{ 
    background-image: linear-gradient(#99ccff, #fff6e4); 
    margin: 0 auto; 
    margin-top:100px; 
    width:600px; 
    height:375px; 
} 

html{ 
    min-height:100%; 
} 

.video { 
    margin: 0 auto; 
    position: relative; 
    height: 375px; 
    width: 600px; 
    background: #73AF96; 
} 
.video img { 
    opacity: 0.65; 
    transition: 0.4s all; 
} 

.video div.play:hover + img { 
    filter: blur(2px); 
    -webkit-filter: blur(2px); 
    -moz-filter: blur(2px); 
    -o-filter: blur(4px); 
    -ms-filter: blur(4px); 
} 

.play { 
    z-index: 1; 
} 

.play { 
    opacity:0.5; 
    height: 100px; 
    width: 140px; 
    position: absolute; 
    text-align: center; 
    cursor: pointer; 
    border-radius: 5px; 
    /*Centering*/ 
    margin: -60px 0 0 -60px; 
    left: 50%; 
    top: 50%; 
    display: block; 
    background: #FF9933; 
    transition: background-color 1s ease; 
    color: white; 
} 
.play:hover { 
    opacity: 0.7; 
    background: #FF6600; 
} 
.icon-play { 
    text-align:center; 
    line-height: 100px; 
    font-size:2.5em; 
} 

.icon-play:before { 
    cursor: pointer; 
} 

Однако, я не в состоянии установить кнопки через JS, и они, кажется, не работают. Заранее благодарим за помощь!

Answer 1

Чтобы сделать это, вы должны использовать Youtube Javascript API. Вот демоверсия полного контроля javascript: https://developers.google.com/youtube/youtube_player_demo

Answer 2

Я знаю, что это конец ответа, но он может помочь кому-то еще достичь этого только в двух строках.

Только на событии щелчка заменить атрибут Src IFrame с URL видео с автовоспроизведением = 1 «//www.youtube.com/embed/QDmJxKHoVBo?autoplay=1»

вашей кнопка воспроизведения или ссылка кода

<a href="javascript:void(0)" onclick="jQuery('#video-frame').attr('src','//www.youtube.com/embed/S-JtVTTMU2A?autoplay=1');jQuery('.video-container').show();" >Play</a> 

Держите источник Iframe атрибут пустой

<div class="video-container" style="display:none"> 
    <iframe id="video-frame" width="853" height="480" src="" frameborder="0" allowfullscreen></iframe> 
<br> 
</div> 

Пусть волшебство работает.