Как исправить проблему с наложением флэш-видео на YouTube в слое всплывающих окон ajax в IE & Chrome? - PullRequest
Новая
       37

Как исправить проблему с наложением флэш-видео на YouTube в слое всплывающих окон ajax в IE & Chrome?

2 голосов
/ 19 апреля 2011

Если вы перейдете на сайт ниже, вы увидите видео на YouTube, но если вы нажмете кнопку «Добавить в корзину» на любом из продуктов ниже, во всплывающем окне отобразится продукт, добавляемый в корзину.Тем не менее, видео YouTube показывает через это.Это проблема Z-индекса или мне нужно добавить несколько тегов в код для вставки с YouTube?Проблема возникает только в Windows на Chrome и IE.Проблема не происходит на MAC в любых браузерах.Я не проверял Safari в Windows.

http://www.unicornfibre.com/pages/Power-Scour-.html

Ниже приведен скриншот проблемы

This is a screenshot of the problem

Ответы [ 5 ]

12 голосов
/ 07 июня 2011

С http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix:

Вместо встраивания в iframe YouTube вот так: 

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI" frameborder="0" wmode="Opaque">

добавить? Wmode = прозрачно для встроенной ссылки, напримерэто: 

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

Это сработало для меня.

3 голосов
/ 08 октября 2011 
$(document).ready(function ()
 {$('iframe').each(function()
     {var url = $(this).attr("src");
      var result = url.search(/youtube/i);
      if(result!=-1)
       {result = url.indexOf('?');
        if(result!=-1)  
          {$(this).attr("src",url+"&wmode=transparent");
          } else {$(this).attr("src",url+"?wmode=transparent");}
       }
     });
 });

Это исправит z-index для всех фреймов, связанных с YouTube.Требуется JQuery для того, чтобы работать.Вставьте код в пустой файл js и включите его в исходный код.Надеюсь, это поможет

0 голосов
/ 03 марта 2014

Если iframe встраивает загрузку видео динамически с API-интерфейсом YouTube (а не с жестко закодированными элементами iframe), вы можете изменить объект проигрывателя следующим образом: 

     player = new YT.Player('show', {
          height: '540',
          width: '960',
          videoId: firstID,
          playerVars: { rel:0,modestbranding:1, wmode: "transparent" },
          events: {
        'onStateChange': onPlayerStateChange
}

        });
0 голосов
/ 19 апреля 2011

вы можете исправить это, установив wmode на "opaque" 

<object width='425' height='344'> 
    <param name='movie' value='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'> 
    <param name='type' value='application/x-shockwave-flash'> 
    <param name='allowfullscreen' value='true'> 
    <param name='allowscriptaccess' value='always'> 
    <param name="wmode" value="opaque" />
    <embed width='425' height='344'
            src='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'
            type='application/x-shockwave-flash'
            allowfullscreen='true'
            allowscriptaccess='always'
            wmode="opaque"
    ></embed> 
    </object>
0 голосов
/ 19 апреля 2011

Не уверен, как это сделать с помощью встраивания iframe, но у флэш-ролика должен быть дополнительный параметр: 

wmode:"transparent" //instead of transparent you can also put opaque

Флэш-ролик не будет прослушивать z-index, пока на нем нет wmode..

...