Главная > FAQ > Как поместить свой элемент поверх видео Youtube

Как поместить свой элемент поверх видео Youtube

Например, следующим образом можно убрать сточку с навигацией от Youtube:

<div>
<div style="z-index: 1">
<object width="500" height="309">
<param name="wmode" value="transparent"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/fAYMgOh1y9Q?rel=0&autoplay=1&loop=1&border=0&showinfo=0&color1=0xffffff&color2=0xffffff&disablekb=1&wmode=opaque" type="application/x-shockwave-flash" width="500" height="309" allowscriptaccess="always" allowfullscreen="true" wmode="transparent"></embed>
</object>
</div>
<div style="position: relative; bottom: 30px; z-index: 2; background: #FFFFFF; width: 500px; height: 30px;">
</div>
</div>

На что нужно обратить внимание:
1)      wmode: transparent и параметр wmode=opaque
2)      z-index у видео Youtube должен быть меньше чем у элемента, который вы размещаете поверх
3)      position: relative; bottom: 30px; у стиля DIV, который располагается поверх видео. Число пикселей и направление сдвига выбираете сами.

Как это выглядит

Пример 1 (внизу нет навигации):

Пример 2 (Свой текст поверх плеера Youtube):

Всем привет от soloro.ru =)
Categories: FAQ Tags:
  1. 9 февраля 2012 в 20:21 | #1

    Я ничего не понял. Мне, например, интересно, как поместить полупрозрачный текст(шрифт)поверх видео изображения на youtube?

  2. Turbo
    9 февраля 2012 в 21:04 | #2

    @gossha
    Вместо этого пишешь то что тебе надо:
    < div style="position: relative; bottom: 30px; z-index: 2; background: #FFFFFF; width: 500px; height: 30px;" >

    Внутри тегов можно и текст воткнуть.

  3. Turbo
    29 февраля 2012 в 11:44 | #3

    @gossha
    Второй пример добавил с текстом.

  4. Анна
    31 января 2013 в 00:55 | #4

    Спасибо. Статья помогла

  1. Пока что нет уведомлений.