Как разместить div поверх встроенного видеопроигрывателя в chrome

Question

У меня есть код для размещения div поверх iframe, который работает. Однако, когда я устанавливаю src iframe в проигрыватель youtube/vimeo, в chrome iframe остается сверху (он отлично работает в сафари и FF).

Есть ли способ исправить это? CSS:

#over{ 
    float: left; 
    margin-top: -293px; 
    margin-left: 185px; 
    background-color: #FF0000; 
    height: 30px; 
} 
iframe{ 
    float: left; 
    width: 100%; 
    height: 550px; 
} 

HTML:

<div> 
    <iframe src="http://player.vimeo.com/video/67124108?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;wmode=transparent"> 
    You don't have iframe support, unfortunately 
    </iframe> 
    <div id="over">I'm over the iframe</div> 
</div> 

[можно видеть в работе здесь: http://jsfiddle.net/QPXAT/]

Answer 1

При попытке добавления z-index, вы указать позиционирование? z-index работает только с позиционируемыми элементами. поэтому я добавил position: relative для обоих. Это тот эффект, который вы делали?

http://jsfiddle.net/QPXAT/1/

Answer 2

Это не проблема с IFRAME, его вопрос с флэш-плеером.

Flash имеет так называемый wmode, который указывает, как внедренный объект должен отображаться с другим содержимым html.

Обычно он находится на вершине всего, но он может быть также указан в честь z-index и т.д.

WMODE = окна: Обычно параметр по умолчанию. Это ставит Flash-фильм поверх всего содержимого на странице HTML.

wmode = opaque: этот режим должен позволять Flash хорошо воспроизводить HTML-страницу и придерживаться z-индекса.

Вот хорошее резюме:

http://www.8bitrocket.com/2011/02/11/quick-guide-to-wmode-and-flash-embedding/