Показывать Div поверх видео (iframe или объект)

Question

У меня есть веб-сайт, где верхний и нижний колонтитулы находятся в позиции fixed, а средний контент можно прокручивать. На самом деле, когда мы прокручиваем, контент должен идти под верхним или нижним колонтитулом, потому что веб-сайт занимает 100% высоты, и я решил применить overflow: auto; к телу. Невозможно иметь конкретную высоту для среднего содержимого, потому что верхний и нижний колонтитулы имеют фиксированные размеры.

Я применил z-index ко всем элементам, и он прекрасно работает, но мне нужно встраивать видео с Youtube, Vimeo или других ... Обычно эти видео отображаются с использованием iframe или object; мой клиент помещает код для вставки непосредственно в бэк-офис. Вот моя проблема: при прокрутке видео отображаются в верхнем и нижнем колонтитулах, даже если я установил конкретный z-index; другие элементы среднего содержания хорошо спрятаны ...

У вас есть идея решить эту проблему?

Спасибо!

Answer 1

Без использования jquery вы можете просто использовать это в своем теге iframe

src="http://www.youtube.com/embed/yourVideo?wmode=transparent"

Answer 2

Добавление к ответу Ганса:

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

(вы все еще должны использовать z-index)

Answer 3

Вы должны установить прозрачный wmode в вашей вспышке. поэтому в ваш код для вставки / код объекта добавьте wmode="transparent"

или

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

Answer 4

Добавление к ответу Йизелы:

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