Как я могу заставить iframe уважать z-index в IE?

Question

У меня есть элемент iframe youtube на моем веб-сайте, но он находится рядом с моими пунктами меню. Когда я наводю курсор мыши на элемент меню, открывается подменю, которое частично покрывает iframe (из-за его положения это не определенная функция, очевидно). Это отлично работает в Firefox, но, как обычно, не в IE, здесь iframe покрывает меню, делая его в основном нечитаемым. Есть ли вариант, который мне нужно добавить в iframe, чтобы он работал или это просто невозможно?

(тестирование с IE9 на данный момент)

Answer 1

Попробуйте использовать метод встраивания iframe Youtubes (если это не то, что вы уже делаете, и добавьте:? Wmode = прозрачный для URL-адреса (замените? На &, если это не первая переменная URL-адреса)

Answer 2

Есть несколько вопросов с этим вопросом.Прежде всего, в IE нет проблем с установкой iframe выше или ниже другого содержимого в вашем документе с использованием z-index.Более высокий z-индекс делает ваш iframe выше других элементов, (как обычно), насколько ваш iframe позиционирован: относительный, абсолютный или фиксированный.

Настоящая проблема возникает, когда содержимое вашего iframe является встроенным flashобъект.В этом случае флэш-объект может быть позиционирован по z, только если его параметр wmode установлен на «прозрачный» или «непрозрачный», но он не будет работать, если флэш-память включена в документ HTML с помощью wmode = «window».

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

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

установлено.

В случае, если YouTube использует режим «окна»,вы всегда можете использовать свой собственный флеш-плеер и динамически подключать видео на YouTube, устанавливая режим флеш-объекта на прозрачный.

Answer 3

Вот не чистое решение JS, альтернативное JQuery:

var iFramesOnPage = document.getElementsByTagName("IFRAME");
for(var i = 0; i < iFramesOnPage.length; i++) { 
    var newiFrameURL = iFramesOnPage[i].getAttribute("src")+"?wmode=transparent"; 
    iFramesOnPage[i].setAttribute("src", newiFrameURL);
};

Answer 4

Я видел похожую проблему, слово ссылки на YouTube по умолчанию должно быть embed ,

<iframe src="http://www.youtube.com/embed/video_id"></iframe>

, а не только v-link (v-link игнорируетz-index):

<iframe src="http://www.youtube.com/v/video_id" frameborder="0"></iframe>

Вот пример для IE: http://jsfiddle.net/7fd8Y/21/