В этой небольшой статье я расскажу об одной особенности плеера youtube , с которой мне пришлось не так давно столкнуться. В мою задачу входило сделать всплывающее окно с помощью блока div , и оно должно быть, разумеется, поверх всего контента. Я поставил нужный z-index на окно, и оно стало поверх всего, за исключени...
В этой небольшой статье я расскажу об одной особенности плеера youtube, с которой мне пришлось не так давно столкнуться. В мою задачу входило сделать всплывающее окно с помощью блока div, и оно должно быть, разумеется, поверх всего контента. Я поставил нужный z-index на окно, и оно стало поверх всего, за исключением плеера youtube.
Оказалось, что по умолчанию плеер youtube игнорирует свойство z-index у любых блоков, и данный плеер всегда поверх всего. Решается данная проблема очень просто. Надо всего лишь добавить ещё один параметр внутрь тега object, делается это с помощью обычного тега param:
<param name="wmode" value="opaque" />
Если же у Вас плеер вставляется через iframe, то тогда нужно написать так:
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/111?wmode=transparent" frameborder="0" wmode="opaque">
То есть опять же добавить параметр wmode="opaque".
Всё, после этого плеер youtube начнёт учитывать свойство z-index. Надеюсь, что кому-нибудь вот такая небольшая хитрость поможет в решении проблем с z-index и плеером youtube.
