Компьютеры Программирование Flash перекрывает выпадающее меню

Flash перекрывает выпадающее меню

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

Случайная новость

Система активной помощи при парковке Ford Focus 3

Вы, наверное уже видели рекламу Форда Фокус 3, в которой показано как автомобиль сам себя паркует - сколько же стоит такое удовольствие?

Подробнее ...

Материал о ПК

Одна из первых реклам в СССР - Вентиляторы

Одна из первых реклам в СССР - реклама московского вентиляторного завода, выпускающего промышленные вентиляторы вызывает ностальгию по временам советского телевидения.

Подробнее ...


Нажимай!

Кто на сайте

Сейчас 7 гостей онлайн

Голосуй

Используете ли вы плёнку на сенсорных экранах?
 

Valid XHTML 1.0 Transitional Читать в Яндекс.Ленте