У меня возникают проблемы с пониманием, почему я не могу получить события 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);
});
});