Видео от youtube перекрывает fancybox

Многим уже успел полюбится замечательный плагин отображения изображений для блогов и галерей — Fancybox. Действительно он очень красив и функционален, например у меня он стал полноценной заменой плагина «Shutter Reloaded». Но ложка дегтя также есть.

Заметил баг, когда добавил видео в сайдбар одного из сайтов. Теперь, при открытии картинки, видео от youtube перекрывало картинку fancybox сверху, то есть получалась просто накладка, как показано на рисунке ниже:

fancybox и youtube bug((

Заметили, я надеюсь. Теперь пробуем это исправить.

Есть два варианта вставки видеозаписей с Youtube в блог или сайт:

1. Старый способ в виде Embed

<object classid=»clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ width=»310″ height=»265″ codebase=»http://download.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=6,0,40,0″><param name=»allowFullScreen» value=»true» /><param name=»allowscriptaccess» value=»always» /><param name=»src» value=»http://www.youtube.com/v/UW14wXreeyE?fs=1&amp;hl=en_US» /><param name=»wmode» value=»opaque» /><param name=»allowfullscreen» value=»true» /><embed type=»application/x-shockwave-flash» width=»310″ height=»265″ src=»http://www.youtube.com/v/UW14wXreeyE?fs=1&amp;hl=en_US»  wmode=’opaque’ allowscriptaccess=»always» allowfullscreen=»true»></embed></object>

Обращаем пристальное внимание на один параметр, я его выделил красным. Обычно данный параметр не указан, но для корректной работы Youtube ролика и Fancybox он обязательно должен быть.

2. Новый вариант — фрейм HTML5
Во-первых, я его настоятельно рекомендую использовать — кода меньше и людей с сайта не уводит. С настройкой фрейма ещё проще, нужно использовать дополнительный стиль, как у меня в коде ниже:

<iframe title=»Видео, которое нужно смотреть каждое утро!»  style=’z-index: — 10′ type=»text/html» width=»310″ height=»265″ src=»http://www.youtube.com/embed/UW14wXreeyE» frameborder=»0″></iframe>

Вот собственно и весь способ, хотя, если видео много я бы подумал над исправлением самого плагина, думаю это также тривиальная задача. Результат наших титанических усилий таков, как на скриншоте ниже:
fancybox and youtube repair z-index

Удачного блоггинга!
ЗЫ: Скриншоты любезно предоставил журнал про онлайн сервисы ITPride

Сейчас другие читают: