Google Chrome, Flash и Z-индекс неверно behvaiour - PullRequest
Новая
       50

Google Chrome, Flash и Z-индекс неверно behvaiour

10 голосов
/ 16 марта 2011

Я должен показать div над iframe, который содержит флэш-видео.Z-индекс div установлен как 9999. но у ifarame нет z-индекса.Но эта черта лежит под флэш-памятью для Google Chrome, она отлично работает в IE 7/8/9 и Mozila Firefox.

Код, который я использую:

flash.html 

    <!doctype html>
<html>
    <head>
        <title> Flash - zIndex</title>
    </head>
    <body>
        <div style="position : absolute;left:200px;top:200px;width:320px; height:220px;background-color:#fff;z-index:999;" >
            <iframe src="blank.html"  style="width:100%; height:100%;">
            </iframe>
        </div>
            <div id="textDiv" style="position : absolute; z-index:9999; left:200px;top:200px;border: 5px solid rgb(235, 127, 0);width:300px; height:200px;background-color:#fff;overflow:auto;">
            this is the text div
            </div>
        <div id="flashDiv" style="height: 150px;">
        </div>
            <iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/3RD_3wooRjI" frameborder="0" allowfullscreen></iframe>
    </body>
</html>

blank.html 

<!doctype html>
<html>
<head></head>
<body></body>
</html>

Пожалуйста, дайте некоторое решение этой проблемы.

Заранее спасибо,

Prashant

Примечание. Пожалуйста, не указывайте решение как сохраняющее "wmode = прозрачный" в качестве параметра get в iframe.источникпоскольку это не обобщенное решение для этой проблемы.

Ответы [ 5 ]

20 голосов
/ 22 декабря 2011

Вы можете добавить параметр wmode в виде строки запроса.

Пример: src="http://www.youtube.com/embed/LSaoRSlqQzw?wmode=opaque"

6 голосов
/ 16 марта 2011

Проблема, вероятно, связана с wmode вашего флеш-плеера.Попробуйте "wmode = opaque", что означает, что он должен хорошо играть с вашим z-порядком http://www.8bitrocket.com/2011/02/11/quick-guide-to-wmode-and-flash-embedding/

3 голосов
/ 04 мая 2011
1 голос
/ 31 января 2013

это может помочь: 

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){

    $("iframe").each(function(){
      var ifr_source = $(this).attr('src');
      var wmode = "wmode=transparent";
      if(ifr_source.indexOf('?') != -1) $(this).attr('src',ifr_source+'&'+wmode);
      else $(this).attr('src',ifr_source+'?'+wmode);
    });

  });
</script>

по: http://maxmorgandesign.com/fix_youtube_iframe_overlay_and_z_index_issues/

1 голос
/ 16 марта 2011

Я могу добавить wmode, если и только если флэш-контент находится на моей веб-странице, обратите внимание, что контент IFRAME принадлежит третьей стороне (в данном случае YouTube).Как я могу справиться с таким сценарием?

...