Z-index для видео с YouTube
Работая над одним проектом наткнулся на очердные грабли. На сайте нужно было выводить видео взятое с YouTude. Всё бы ни чего, но всплывающее меню никак не хотело отображаться поверх выводимого на сайте видео.
Все дело в том, что флэш перекрывает элементы сайта с z-index, которые должны быть поверх флеша.Наверняка все знают, что видео можно разместить на сайте используя старый код встраивания через "object", либо через "iframe", котороый YouTube предлагает использовать по умолчанию. Как известно, заказчику бывает тяжело объяснить что надо поставить еще одну лишнюю галочку, прежде чем копировать генерируемый ресурсом код для вставки. А иногда можно просто и забыть в торопях, или кто-то другой будет размещать видео. Да мало ли что может быть. Поэтому надо, как говориться делать на совесть, чтоб на любой случай жизни подошло.
С object все просто и давно известно, добавляем <param wmode="opaque">, и дело в шляпе. Cо вставкой видео через iframe принцип тот же, надо добавить параметр который изменит приоритет при наложении его на другие html-элементы сайта. Например так:
<iframe frameborder="0" src="http://www.youtube.com/embed/jEotUFy5n-c" width="480" height="360" wmode="opaque" ></iframe >
Но добавлять в ручную каждый раз в общем то утомительное занятие. Поэтому воспользуемся замечательной библиотекой jQuery. И итоговый вариант функции следующий:
$(document).ready(function (){
$('iframe').each(function(){
var url = $(this).attr("src")
$(this).attr("src",url+"?wmode=transparent")
});
});
12.01.2012