z-index и iFrames! - PullRequest
Новая
       125

z-index и iFrames!

33 голосов
/ 12 марта 2011

Я использую плагин FancyBox для некоторых изображений моего сайта.На одной из моих страниц у меня также есть встроенный код iFrame с YouTube, чтобы разместить видео на странице.

На этой же странице находится эскиз, при нажатии которого FancyBoxes изображение.Тем не менее, встроенное видео YouTube все еще лежит поверх изображения FancyBox.Я немного поэкспериментировал с z-index и все еще не повезло.

Имеет ли iFrame преимущество над всеми элементами на странице, даже с установленным z-index и т. Д .?

Ответы [ 6 ]

37 голосов
/ 17 июля 2011

Добавить wmode = прозрачный в качестве параметра.

Раствор HTML 

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

Решение jQuery: 

$(document).ready(function () {
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

Источник http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix

13 голосов
/ 12 марта 2011

Одним словом, да. Однако Youtube видео являются Flash. Flash также имеет преимущество над Z-порядком. Он будет наложен независимо от того, находится он в рамке или нет.

IFRAME и Flash являются «тяжеловесными» объектами. У них есть свои собственные объекты Window Manager (HWND в Windows), поэтому они находятся либо перед другими тяжелыми объектами, либо за ними.

div, span и т. Д. Являются «легкими». То есть они представляют собой нарисованные объекты, нарисованные на теле (которое является тяжеловесным объектом), и управляются браузером, а не оконным менеджером.

Что касается оконного менеджера операционной системы, то это просто красивые картинки, нарисованные браузером. Вот почему они не могут перекрывать «реальные» объекты (или то, что оконный менеджер считает реальными).

Они должны быть легкими, потому что они быстро исчерпали бы оконный менеджер, если бы каждый DIV, SPAN и A должны были зарезервировать ресурсы ОС.

4 голосов
/ 06 сентября 2011

Очень просто, просто добавьте эти параметры в ваш URL iframe и вот оно: 

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

Удачи!

4 голосов
/ 12 марта 2011

Если вы хотите, чтобы апплет Flash отображался в соответствии с теми же правилами z-index любого другого элемента HTML, вам необходимо установить атрибут WMODE для включенной флэш-памяти.

См .:

  1. http://www.communitymx.com/content/article.cfm?cid=E5141
  2. различия между использованием wmode = "transparent", "opaque" или "window" для внедренного объектана веб-странице
0 голосов
/ 14 января 2013

Хм, проблема здесь в том, что я не контролирую элементы вспышки. Я просто извлекаю встроенный HTML-код iFrame с сайта YouTube, который содержит только теги. Поэтому я не могу установить атрибут WMODE.

Поздний ответ, но: да, вы можете. Просто прикрепите? Wmode = непрозрачный на ваш URL. 

<iframe src="http://www.youtube.com/embed/vRH3Kq5qDw4?wmode=opaque".............
0 голосов
/ 07 февраля 2012

Чтобы заставить это работать в IE (по крайней мере, 7 и 8), вы должны добавить это: 

<param name="wmode" value="transparent" />

Я не верю, что есть способ добавить это к URL-адресу iframe, поэтому оно должно быть у вашего контента, возможно, между тегами объекта.

...