jQuery модальный диалог над iframe YouTube

Question

Мне известно об исправлении, которое было опубликовано при отображении диалогового окна jQuery перед видео на YouTube, но я использую их новый метод встраивания IFrame:

var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;

Как получитьдиалог поверх видео?

Answer 1

Если вы используете новый код iframe, просто добавьте «wmode = transparent» в строку URL-адреса как сегмент строки запроса.

<iframe width="403" height="235" src="http://www.youtube.com/embed/(video_code)?wmode=transparent" frameborder="0" allowfullscreen></iframe>

Answer 2

Я добавил 'wmode' в 'playerVars' к скрипту, см. Пример кода ниже ...

<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'FM-Vt87W3_A',
    playerVars: {
        'autoplay': '0',
        'wmode': 'transparent',
        'showinfo': '0'},
    events: {
        'onStateChange': onPlayerStateChange}
    });
}

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
        window.location="index.php";
    }
}

Answer 3

Я знаю, что этот пост довольно старый. Тем не менее, проблема все еще существует в IE 11. Самый чистый и надежный способ, который я нашел, чтобы решить эту нелепую проблему, это вызвать .hide () для div, содержащего проигрыватель youtube, в диалоге open: function пользовательского интерфейса jQuery ), а затем .show () снова игрок div в диалоге close: function (). Счастливые дни: D