Z-index и iFrames!

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

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

Является ли iFrame старше всех элементов на странице, даже с набором z-index и т.д.?

Ответ 1

Добавьте wmode = transparent в качестве параметра.

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

Ответ 2

Одним словом, да. Однако видео Youtube - Flash. У Flash также есть старшинство по Z-порядку. Он будет накладываться, будет ли он в IFRAME или нет.

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

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

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

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

Ответ 3

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

См:

Ответ 4

Очень просто, просто добавьте эти параметры в свой 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">

Удачи!

Ответ 5

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

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

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

Ответ 6

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

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

<iframe src="http://www.youtube.com/embed/vRH3Kq5qDw4?wmode=opaque".............