Как перекрыть flash

Автор: Евгений Рыжков Дата публикации: 25.02.2009

Проблема

Не перекрываются поверх flash объекты.

Решение

Добавляем flash-объекту (object) параметр wmode:

<object type="application/x-shockwave-flash" data="images/flash/test.swf" width="200px" height="300px">
    <param name="movie" value="path-to/movie.swf" />
    <param name="wmode" value="opaque" /> <!-- это параметр позволяет перекрыть объект -->
</object>
<div class="block"></div> <!-- блок, которым будем перекрывать flash -->
.block { /* блок, которым будем перекрывать flash */
width: 100px;
height: 200px;
background: #ff0000;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}

Демонстрация перекрытия flash.

Заметки

  • использование параметра wmode может привести к некотрым ошибкам работы flash (например, при wmode="transparent" нельзя ввести кириллические символы в поля ввода), используйте его только когда это действительно необходимо + хорошо потом тестируйте функциональность flash-объекта
  • в предыдущей версии метода использовалось значение transparent параметра wmode, от него пришлось отказаться, т.к. обработка прозрачности ведет к снижению производительности браузера

С учетом embed

update 06.03.10 — если объект вставляется с поддержкой старых браузеров, используя embed, тогда нужно добавить wmode и ему:

<object type="application/x-shockwave-flash" data="images/flash/test.swf" width="200px" height="300px">
    <param name="movie" value="path-to/movie.swf" />
    <param name="wmode" value="opaque" /> <!-- это параметр позволяет перекрыть объект -->
    <embed src="path-to/movie.swf" type="application/x-shockwave-flash" wmode="opaque" width="200" height="300" />
</object>

Материалы