Неправильное поведение Google Chrome, Flash и z-index

Добавьте wmode="transparent" в свой тег <embed>. Как следующее.

<embed wmode="transparent" 
       height="314" width="516"
       type="application/x-shockwave-flash" 
       id="player"
       name="page_player" 
       src="/swfs/player.swf" 
       allowscriptaccess="always"
       allowfullscreen="true" 
       flashvars="file=/attachments/files/u_t_o_N_1.mp4">

И скройте div изображения hello, если в этом нет необходимости.

Надеюсь, это поможет!

Я вижу здесь несколько вариантов:

Вариант 1

Используйте тег wmode, и вам нужно установить его при рендеринге объекта. Добавление позже не сработает
(ref1) (ref2)

Использование непрозрачности должно позволить вам настроить таргетинг на объект с помощью стилей z-index CSS. Имейте в виду, что вы должны установить это значение в теге <embed>, а также в param
(ref3) (ref4)

Вариант 2

Скрывайте объект, пока пользователь не нажмет кнопку предварительного просмотра. Я потратил много времени на отслеживание используемого вами javascript, прежде чем я заметил, что Сотирис сказал то же самое. Я считаю, что это ваш код:

$('#play_video_box').click(function(){

if(app.isiPhone() == "iphone" || app.isiPhone() == "ipad"){
return true;
}

$(this).fadeOut('fast');
$('#page_video_preview_image').fadeOut('fast');
var player = document.getElementById('player');
player.sendEvent('PLAY');
return false;
});

Я бы изменил одну строчку на:

$('#page_video_preview_image').fadeOut('fast',function(){$('#video_wrapper').css('visibility','visible')});

И используйте CSS, чтобы по умолчанию сделать видимость скрытой. В зависимости от ваших требований к поддержке javascript вам может потребоваться изменить это.

Третья ссылка, представленная здесь, представляет собой довольно хорошую статью о wmodes и о том, как они работают - я рекомендую проверить это, если вы решите использовать вариант 1 и столкнетесь с проблемами.

Надеюсь, это поможет!

У меня тоже была проблема с z-индексом встроенных Flash-объектов при использовании Google Chrome 8. Все работало отлично в IE 7. lnrbob попал в самую точку своим решением варианта 1. Я установил wmode на непрозрачный в теге <embed>; но я не стал добавлять wmode в качестве тега <param>. Как только я добавил <param name="wmode" value="opaque"/> между тегами <object> и <embed>, z-index начал отлично работать в Chrome без нарушения работы IE.

Он не работает в Firefox 3.6 и Opera 10, а также в Windows.

Возможное решение: просто добавьте в свой CSS visibility:hidden; для селектора #both_video_and_preview_image #video_wrapper.

Затем добавьте код jQuery (я вижу, что вы используете библиотеку), поэтому, когда пользователь щелкает изображение предварительного просмотра, видимость для указанного выше селектора изменяется на видимую.

$("#page_video_preview_image").click(function() {
    $("#both_video_and_preview_image #video_wrapper").css("visibility","visible");
})

следующий код работает, например, в Firefox, Opera, но не работает в Chrome (версия 21)

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="250">
<param name="movie" value="http://img.emarbox.com/dsp/img/300x250.swf">
<param name="quality" value="high"></param>
<param name="wmode" value="opaque"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://img.emarbox.com/dsp/img/300x250.swf" wmode="opaque" allowfullscreen="true" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="250"></embed>
</object>

<div style="cursor: pointer; margin-top:-250px; width:300px; height:250px; z-index:1; visibility: visible;">
<a href="http://www.emarbox.com" target="_blank" >
<img border="0" src="http://img.emarbox.com/dsp/img/flash_blank.gif" width="300" height="250" border="0" /></a>
</div>

Вы пробовали использовать SWFObject и загружать его вот так?