Видео поверх галереи картинок в Joomla — решение проблемы

Если Вы вставляете на свой сайт видео с помощью плагина JW AllVideos Plugin, и одновременно используете в статьях галерею картинок, то наверняка заметите маленькую проблемку. При открытии галереи, видео перекрывает часть картинки и не затемнено вместе со всем контеном. До тех пор пока я не нашел решение этой проблемы, приходилось идти на компромисс и не публиковать в одном материале одновременно видео и галерею картинок, или располагать их подальше друг от друга. Но лучше конечно же решить эту проблему, поэтому давайте этим и займемся.

Данная ситуация происходит из-за некорректного позиционирования по оси Z (z-index). Исправить ситуацию можно добавив в URL адрес в коде видео параметр «wmode» со значением «opaque».

То есть если был код:

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

То исправить на:

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

Если Вы вставляете код видео напрямую, то просто измените код вставки видео по аналогии выше.

Если же Вы пользуетесь плагином JW AllVideos, то нужно дописать этот параметр в файле sources.php в папке /plugins/content/jw_allvideos/includes

Например для Ютуба, код:

"youtube" => "<iframe src=\"http://www.youtube.com/embed/{SOURCE}\" width=\"{WIDTH}\" height=\"{HEIGHT}\" frameborder=\"0\" allowfullscreen title=\"JoomlaWorks AllVideos Player\"></iframe>",

Подправим на:

"youtube" => "<iframe src=\"http://www.youtube.com/embed/{SOURCE}?wmode=opaque\" width=\"{WIDTH}\" height=\"{HEIGHT}\" frameborder=\"0\" allowfullscreen title=\"JoomlaWorks AllVideos Player\"></iframe>",

Кстати здесь же можно заменить значение атрибута title, например на «видео». Аналогичным образом, если необходимо подправляем код для других видео-хостингов.

Теперь при просмотре галереи, видео будет затемнено и не будет располагаться поверх картинки.

18.06.2012

100 просмотров

Нравится 0
Загрузка...

Комментарии

Оставьте первый комментарий!

avatar
wpDiscuz