Как быть, когда 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")
  );
);