Свойство z-index и плеер youtube
В этой небольшой статье я расскажу об одной особенности плеера 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.
-
Создано 13.09.2013 13:04:51
-
Михаил Русаков
Комментарии (6):
А почему он по-умолчанию не учитывает? И почему именно этот параметр надо писать? Что он делает? Можно по-подробнее. Просто интересен сам принцип работы
Ответить
z-index управляет порядком наложения элементов друг на друга. Поставите на картинку -1, она будет вести себя как фон для других элементов.
Ответить
Вы можете написать как бы целый раздел про кросбраузерность ? У меня постоянно на каждом сайте есть проблема. И мне хотелось быстро и находчиво их исправлять так как делаете это вы.
Ответить
Тут без практики не обойтись. Купите платный курс по вёрстке сайтов у Михаила, а потом практикуйтесь и ещё раз практикуйтесь.
Ответить
А можно еще к ссылке к ролику добавить ?wmode=transparent.\n \r\n .А wmode="opaque" у мну не работало
Ответить
как поступить с jquery плагинами lightbox, там в iframe этот код не помог. спасибо!
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.