Опускаем видео youtube под всплывающие окна

На многих сайтах (особенно по инфобизнесу) стало модно использовать различного рода всплывающие окна с подпиской и тому подобное. Да и картинки смотреть удобно, когда после клика по ней, вылазит полная её версия, а остальной экран затемняется. Но зачастую на сайтах, где используются эти полезности, возникают неприятные моменты, связанные с flash технологией (видео youtube (и другие), различные карты, игры, обратный звонок, т.д.)

Так вот, проблема заключается в том, что все эти всплывающие фичи каким-то чудесным образом прячутся под вышеупомянутые flash-элементы. Но, как оказалось, это поправимо. Далее я рассмотрю, как решить данную проблему, на примере видео youtube.

Прячем <iframe></iframe>

Для вставки видео youtube на сайт можно использовать 2 вида кода (старый и новый). Новый  способ реализован через фрейм <iframe>. В связи с этим наша задача сводится к решению проблемы «каким образом поместить <div> поверх <iframe>» или «как убрать <iframe> на задний план». Проще говоря, нужно запихнуть видео под любой всплывающий блок.

Давайте взглянем на код, которым вставляется видео на сайт:

youtube share

<iframe width="560" height="315" src="http://www.youtube.com/embed/aTPrdm3ukG0?rel=0" frameborder="0" allowfullscreen></iframe>

Нас в этом коде интересует строчка со ссылкой

http://www.youtube.com/embed/aTPrdm3ukG0?rel=0

Чтобы видео начало прятаться под всплывающий блок достаточно дописать в конце ссылки &wmode=opaque что в результате даст

http://www.youtube.com/embed/aTPrdm3ukG0?rel=0&wmode=opaque

Ежели ссылка http://www.youtube.com/embed/aTPrdm3ukG0 у нас без хвостика ?rel=0 в таком случае дописываем вот такой хвост ?wmode=opaque

В результате получаем либо

<iframe width="560" height="315" src="http://www.youtube.com/embed/aTPrdm3ukG0?rel=0&wmode=opaque" frameborder="0" allowfullscreen></iframe>

либо

<iframe width="560" height="315" src="http://www.youtube.com/embed/aTPrdm3ukG0?wmode=opaque" frameborder="0" allowfullscreen></iframe>

Прячем <object>

Второй вариант кода, для установки видео youtube на сайт (старый код) выглядит вот так:

youtube share old

<object width="560" height="315">
<param name="movie" value="http://www.youtube.com/v/aTPrdm3ukG0?hl=ru_RU&amp;version=3&amp;rel=0"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/aTPrdm3ukG0?hl=ru_RU&amp;version=3&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

Чтобы спрятать видео, вставленное таким образом, мы должны дописать строчку 
<param name="wmode" value="opaque" /> перед <embed. Однако попытавшись использовать этот метод на стороннем сайте, у меня не вышло опустить видео на задний план. Но решение оказалось близко.

Если взглянуть на часть кода
<embed src="http://www.youtube.com/v/aTPrdm3ukG0?hl=ru_RU&version=3&rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
то можно заметить, что здесь повторяются все вышеперечисленные свойства. Поэтому наше wmode мы должны продублировать в этой части кода.
<embed src="http://www.youtube.com/v/aTPrdm3ukG0?hl=ru_RU&version=3&rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>

В результате получим вот такой код, который необходимо вставить на сайт:

<object width="560" height="315">
<param name="movie" value="http://www.youtube.com/v/aTPrdm3ukG0?hl=ru_RU&amp;version=3&amp;rel=0"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<param name="wmode" value="opaque"></param>
<embed src="http://www.youtube.com/v/aTPrdm3ukG0?hl=ru_RU&amp;version=3&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>
</object>

Для иллюстрации работоспособности ниже привожу 3 видео (первое без исправлений, второе новым способом с исправлением и третье старым способом с исправлением). Нажмите на кнопку, чтобы вызвать всплывающее окно, которое покажет, как работает механизм, описанный выше и попробуйте прокрутить страничку с открытым всплывающим окном, чтобы посмотреть как ведет себя видео.

Вызвать всплывающее окно

Опускаем видео youtube под всплывающие окна: 2 комментария

    1. vetraz Автор записи

      Вполне себе работает. Внимательно прочтите абзац перед кнопкой и затем попробуйте проскролить страничку с открытым всплывающим окном вниз.

Добавить комментарий для Сергей Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *