События на iframe YouTube внутри модального бутстрапа - PullRequest
0 голосов
/ 14 декабря 2018

У меня возникают проблемы с пониманием, почему я не могу получить события iframe на youtube, когда видео находится в модале, к которому добавлено свойство iframe через jquery, полученное по ссылке, которая запускает модал.

Если я помещаю SRC в тег iframe вручную и запускаю, все работает как положено.

Я создал два кодекса для иллюстрации этого.

https://codepen.io/nick-jlsa/pen/GPZogZ

Сначала это кодовая ручка, которая работает, как и ожидалось.Кнопка запускает модал, модал имеет iframe с видео SRC YouTube.Цвет границы видео изменяется в зависимости от статуса плеера.Это работает отлично.Но видео SRC уже должно быть в теге iframe.Мне нужно, чтобы тег iframe заполнялся ссылкой, которая его запускает.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" id="play-video">
  launch and play youtube video
</button>

<iframe id="player" width="100%" height="315" src="//www.youtube.com/embed/ALUKDkOxVPo?enablejsapi=1" frameborder="0" allowfullscreen style="border: solid 4px #37474F"></iframe>

=========================

https://codepen.io/nick-jlsa/pen/gZrPeR

Второй - это кодовая ручка, показывающая, что когда iframe src вводится с помощью jQuery по щелчку ссылки, JS не может видеть события игрока.

<a class="launch-video-modal clickable" data-toggle="modal" data-target="#videoModal" data-video="https://www.youtube.com/watch?v=ALUKDkOxVPo"><span class="text"><span class="text-inner">Watch Now</span></span></a>

<iframe id="player" width="100%" height="315" src="" frameborder="0" allowfullscreen style="border: solid 4px #37474F"></iframe>

$('a.launch-video-modal').click(function() {
    var theModal = $(this).data("target"),
    videoSRC = $(this).attr("data-video"),
    splitter = '?v=',
    indexOf = videoSRC.indexOf(splitter),

    videoID = videoSRC.slice(indexOf+splitter.length);

    videoSRCauto = "//youtube.com/embed/" + videoID + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1&enablejsapi=1";
    $(theModal + ' iframe').attr('src', videoSRCauto);
    $(theModal + ' button.close').click(function () {
    $(theModal + ' iframe').attr('src', videoSRC);
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...