На веб-сайте 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 или модальный.
Я все еще здесь потерян, поэтому, если у кого-то был опыт с этой проблемой или есть подсказка, что является причиной проблемы, и как ее исправить, я был бы очень признателен.
Задача ещё не решена.
Других решений пока нет …