javascript — Uncaught TypeError при публикации и получении из iframe в модальном / popup / lightbox

На веб-сайте WordPress, над которым я работаю, на главной странице (главная страница) есть всплывающее окно, содержащее фрейм Vimeo.

Я поместил немного Javascript в header.php взаимодействовать с проигрывателем Vimeo, который работает как шарм везде, где проигрыватель Vimeo встроен непосредственно на страницу / шаблон / документ.

Однако на домашней странице, где iframe встроен во всплывающее окно (модуль Popup Builder), JS не может связаться с iframe и выдает ошибку, подобную этой:

Uncaught TypeError: Вы должны передать либо действительный элемент, либо действительный идентификатор.
у нового игрока (player.js: 2)

Что я могу сделать, чтобы JS мог публиковать и получать из iframe во всплывающем окне?

Фрейм:

<iframe src="https://player.vimeo.com/video/76979871?autoplay=1&muted=1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen encrypted-media"></iframe>

Добавление JS Vimeo API в header.php:

<script src="https://player.vimeo.com/api/player.js"></script>

Скрипт JS (тот же результат, если я помещу его в верхний колонтитул, нижний колонтитул или непосредственно в шаблон первой страницы)

<script>
document.getElementById("fp-btn").addEventListener("click", function(){
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);

player.on('ended', function() {
document.getElementById("clickTHIS").click();

});

player.getVideoTitle().then(function(title) {
console.log('title:', title);
});
});

</script>

EventListener Сценарий делает то, что он должен ждать. Но когда я нажимаю на ссылку, чтобы вызвать всплывающее окно с iframe Vimeo внутри, он выдает эту ошибку:

* Переданный элемент проигрывателя не является вставкой Vimeo. в новом Player (player.js: 2) в HTMLSpanElement. ((Индекс): 492)

Который ссылается на эту строку: var player = new Vimeo.Player(iframe);

Я также пытался изменить querySelector в document.querySelector('iframe[href*="vimeo.com"]'); но затем все возвращается к той же ошибке, что и раньше:

TypeError: Вы должны передать либо действительный элемент, либо действительный идентификатор. у нового игрока (player.js: 2)

Как я уже сказал, код работает где-либо еще на сайте, если iframe встроен непосредственно в страницу, а не в popup / lightbox или модальный.

Я все еще здесь потерян, поэтому, если у кого-то был опыт с этой проблемой или есть подсказка, что является причиной проблемы, и как ее исправить, я был бы очень признателен.

0

Решение

Задача ещё не решена.

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]