Вывод изображения html над флеш видео из youtube

Проблема:
На одной странице, в записи вставлено видео с использованием стандартного кода от youtube и фотогалерея на colorbox (собственно не важно на чем). При щелчке на фотографию, она всплывает поверх всех элементов, но не флэша.. Flash плеер остается поверх всего.

Множество авторов указывают на решение этой проблемы добавлением в Object строки:

<param name="wmode" value="transparent"/>

Однако стандартный код youtube — такой:

<iframe width="420" height="315" src="http://www.youtube.com/embed/6UjtzQzEjgA" frameborder="0" allowfullscreen></iframe>

Это iframe в котором ничего, кроме размера изменить нельзя и здесь некуда добавить param.

Решение:
Тогда выбираем старый код встраивания. Он имеет вид:

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

Здесь уже можно вставить приведенную выше строчку кода.
После этого перекрытие flash html-ем работает в Mozilla FF, но не работает в Chrome.

Методом научного тыка было найдено решение и для Хрома. Надо добавить wmode=»opaque» внутри embed

В итоге код вставки получился таким:

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

Конечно менять каждый раз код вставки утомительно, поэтому если такая необходимость есть постоянно, то CMS можно создать поле, куда будет вводиться только идентификатор видео, а весь остальной код, вместе с html оберткой будет генерироваться скриптом.

Можно надеяться, что youtube добавит параметр wmode внутрь создаваемого ими iframe и стандартный код заработает без плясок с бубном. Тем более, что код с iframe должен уметь отдавать видео через html5 плеер, а object — это только флэш.

В любом случае, имея поле с идентификатором, можно будет заменив тэмплэйт, вывести код в нужном формате.

  • Serge G

    Для того, чтобы это работало в iframe,
    надо просто к строчке src добавить ?wmode=transparent, т.е. должно быть что-то вроде:

    • VladimirDolgov

      Спасибо.

  • Dewdw

    gfgggdf