Автозапуск полноэкранного видео с YouTube при нажатии кнопки с помощью JQuery

Question

На моем веб-сайте есть видео-баннер в верхней части домашней страницы, похожий на AirBnb. На нем есть игровой символ. Когда я нажимаю на глифе, я хочу, чтобы видео с YouTube открывалось в полноэкранном режиме и воспроизводилось автоматически. Затем, когда пользователь выходит из полноэкранного видео, я хочу, чтобы Iframe исчез и все аудио прекратились.

Прямо сейчас у меня есть это для разметки Slim

.fullScreenContainer
    .video-container#autovid height="100%"
      = video_tag("broll2.mp4", autoplay: true, muted: true, preload:true, loop:true)
    .container#playButton
      .text-center
        h1#videoHeading Press Play to Watch the Video

        a href="javascript:void(0);" onclick="addIntroVideo()"
          span.glyphicon.glyphicon-play

и это моя функция jQuery

function addIntroVideo() {
    $('<iframe id="introVideo" src="https://www.youtube.com/embed/6a8fvbkNLWQ?rel=0&autoplay=1" frameborder="0" allowfullscreen="true"></iframe>').appendTo('.fullScreenContainer');
}

Насколько я понимаю, добавление? Rel=0&autoplay=1 к URL-адресу YouTube позволяет воспроизводить видео в полноэкранном режиме и запускаться автоматически. Однако, когда я нажимаю кнопку воспроизведения, он просто загружает крошечный iframe и автоматически воспроизводит его. Как мне изменить этот код, чтобы он делал то, что я хочу?

Answer 1

Не делайте iframe самостоятельно. Вместо этого используйте пример API iframe YouTube. Вы можете добавить встроенный JavaScript под этим тегом Slim:

javascript:

Этот JavaScript создает iframe и объект с именем player у которого есть методы stopVideo() а также startVideo()и вы можете использовать больше JavaScript для привязки этих функций к обработчику нажатий кнопок.