Видео YouTube воспроизводится после закрытия оверлея

Question

Я использую приведенный ниже скрипт для открытия оверлея, но когда я закрываю оверлей, видео iframe по-прежнему воспроизводится в фоновом режиме.

HTML

Answer 1

Поскольку неясно, как вы используете видео YouTube в своем коде, я предполагаю, что вы используете наиболее часто используемый способ, который заключается в использовании встроенного iframe. Так что есть много способов сделать это, лучше всего использовать stopVideo (); функция из API проигрывателя YouTube.

если в вашем коде есть объект проигрывателя YouTube, что-то вроде этого

player = new YT.Player();

, просто используйте эту функцию при нажатии кнопки закрытия.

player.stopVideo();

или вы можете сделать это

$('#parentSelectorOfYourIframe').children('iframe').attr('src', '');

попытаться go через один раз для официального игрока YouTube Документация API

после обновления вашего вопроса, я создал это codePen для вас.

Я надеюсь, что это именно то, что вам нужно, если вам нужно что-то еще, пожалуйста, дайте мне знать.

Очки, чтобы иметь в виду ..

1. добавьте этот vpaframeter в вашу ссылку на видео YouTube, как я сделал ?version=3&enablejsapi=1, и тогда вы можете поиграть с вашим YT-плеером.

Answer 2

Видимо проблема в том, что вы скрываете кадр, а не уничтожаете его. осмотрите свою страницу, и вы увидите, что рамка всегда существует и соответствует

display:"none"

Я пытался заменить

$(id).style.display ='none';

на

$(id).innerHTML  = "";

но у вас больше нет рамки

или вы можете сделать это для

$(id).innerHTML  = '<div class="overlay-inner" style="display:none;"><span onclick="hide(\'popup\')" id="close">&times;</span><iframe src="https://www.youtube.com/embed/xPfgku83XZk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>';

=> вы заменяете рамку на себя, но с дисплеем: в ней нет ни одной