Компьютеры Программирование 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, в которой показано как автомобиль сам себя паркует - сколько же стоит такое удовольствие?

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

Материал о ПК

Презентация Apple - перевод на русский язык

Вот так прошла первая презентация Apple без Стива Джобса. Новые технологии, зал хлопает.... но как-то пока без революции, хотя продажи нового iPhone 4S при этом явно бьют все рекорды.

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


Нажимай!

Кто на сайте

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

Голосуй

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

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