Как быть, когда flash перекрывает какие-то элементы
Очень часто у вебмастеров возникает проблема со вставляемыми видео с того же youtube или других сервисов - ролики перекрывают выпадающие меню и другие элементы на страницах. Расскажу как с этим бороться.
Рассмотрим проблему на примере вставки ролика с youtube.com. Вот вы вставили ролик и он вам перекрыл какой-то элемент на вашей странице - обычно страдают больше всех выпадающие менюшки - они "пропадают" под роликами. Вам может показаться, что если прописать CSS свойство z-index, то проблема решится, но это не так. Итак, суть проблемы такова - ролик грузится на страницу последним и ему всё равно на порядок слоёв - он выше всех. (Не стоит на него за это обижаться).
Решение
Возможны два варианта - вставка ролика через iframe или как кусок html кода. Мне почему-то больше нравится использовать второй вариант. К примеру, вы вставляете что-то вроде
<object style="height: 390px; width: 640px"> <param name="movie" value="http://www.youtube.com/v/wYLXfRe0MuQ"> <param name="allowFullScreen" value="true"> <param name="allowScriptAccess" value="always"> <embed src="http://www.youtube.com/v/wYLXfRe0MuQ" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"> </object>
Чтобы решить проблему с перекрытием для этого ролика достаточно просто дописать 2 параметра
<object style="height: 390px; width: 640px"> <param name="wmode" value="opaque"> <param name="movie" value="http://www.youtube.com/v/wYLXfRe0MuQ"> <param name="allowFullScreen" value="true"> <param name="allowScriptAccess" value="always"> <embed wmode="opaque" src="http://www.youtube.com/v/wYLXfRe0MuQ" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"> </object>
Проблема возникает тогда, когда роликов у вас уже на сайт залито много или же вы планируете добавлять много роликов - к каждому дописывать руками - тяжкий труд, плюс об этом можно будет забыть. Предлагаю, найденное мной на stackoverflow.com решение - с помощью JavaScript автоматически всем роликам добавляем нужные параметры.
function fix_flash() {
// loop through every embed tag on the site
var embeds = document.getElementsByTagName('embed');
for(i=0; i<embeds.length; i++) {
embed = embeds[i];
var new_embed;
// everything but Firefox & Konqueror
if(embed.outerHTML) {
var html = embed.outerHTML;
// replace an existing wmode parameter
if(html.match(/wmode\s*=\s*('|")[a-zA-Z]+('|")/i))
new_embed = html.replace(/wmode\s*=\s*('|")window('|")/i,"wmode='opaque'");
// add a new wmode parameter
else
new_embed = html.replace(/<embed\s/i,"<embed wmode='opaque' ");
// replace the old embed object with the fixed version
embed.insertAdjacentHTML('beforeBegin',new_embed);
embed.parentNode.removeChild(embed);
} else {
// cloneNode is buggy in some versions of Safari & Opera, but works fine in FF
new_embed = embed.cloneNode(true);
if(!new_embed.getAttribute('wmode') || new_embed.getAttribute('wmode').toLowerCase()=='window')
new_embed.setAttribute('wmode','opaque');
embed.parentNode.replaceChild(new_embed,embed);
}
}
// loop through every object tag on the site
var elementToAppend = document.createElement('param');
elementToAppend.setAttribute('name', 'wmode');
elementToAppend.setAttribute('value', 'opaque');
var objects = document.getElementsByTagName('object');
for (var i = 0; i < objects.length; i++) {
var newObject = objects[i].cloneNode(true);
elementToAppend = elementToAppend.cloneNode(true);
newObject.appendChild(elementToAppend);
objects[i].parentNode.replaceChild(newObject, objects[i]);
}
}
window.onload = fix_flash;
Для второго случая вставки роликов через iframe подойдёт следующее решение на javascript:
$(document).ready(function () $('iframe').each(function() var url = $(this).attr("src") $(this).attr("src",url+"?wmode=transparent") ); );