z-index и iFrames!

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

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

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

Добавьте wmode = transparent как param.

Решение Html

  

Решение 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

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

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

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

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

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

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

Видеть:

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

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

  

Удачи!

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

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

 

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

  

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