Как прикрепить видео YouTube на сайт через JavaScript API YouTube

Question

У меня есть этот код в JS:

/*
Video play
=========================== */
$("#ytplayer").css({'opacity':'0','filter':'alpha(opacity=0)'});
$( ".start-video" ).on("click",function(){
    $('#ytplayer').fadeTo(900, 1);$( ".video-image" ).fadeOut(800);
    return false;
});
$(document).on('click', '.start-video', function () {
    $(this).fadeOut(800);
    player.playVideo();
    return false;
});

И у меня есть этот код в HTML:

<div class="col-md-6">
    <div class="video-wrapper">
        <div class="video-container">
            <div id="ytplayer" class="player"></div>
        </div>
        <button class="start-video"></button>
        <div class="video-image"><img src="img/img-video.jpg" class="img-responsive" alt="" /></div>
    </div>
    <img src="img/shadow-video.png" class="img-responsive" alt="" />
</div>

Я не знаю, куда вставить iFrame с YouTube. Пожалуйста, помогите.

Answer 1

<div class="col-md-6">
<div class="video-wrapper">
    <div class="video-container">
        <div id="ytplayer" class="player">
          <iframe width="560" height="315" src="https://www.youtube.com/embed/xmVRZr91Qok" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
      </div>
    </div>
    <button class="start-video">Start</button>
    <div class="video-image"><img src="img/img-video.jpg" class="img-responsive" alt="" /></div>
</div>
<img src="img/shadow-video.png" class="img-responsive" alt="" />

Все, что вам нужно сделать, это добавить тег iframe в ваш ytplayer Div