Google Chrome, le Flash et le z-index de mauvais comportement

Google Chrome affiche le z-index de vidéo Flash est incorrecte.

Prendre un coup d'oeil à http://maxusglobal.com/ dans Firefox ou Internet Explorer.

Maintenant prendre un coup d'oeil dans google Chrome.

La grosse vidéo en haut de la page devrait avoir un "aperçu" de l'image z-indexé sur le dessus de lui. Il le fait dans Firefox et Internet Explorer, mais pas dans Google Chrome.

Cela ne semble pas être un WebKit chose, mais plus précisément un Chrome bug.

J'ai essayé toutes les wmodes, (opaque, fenêtre et transparent), mais cela ne résout pas le problème. J'ai aussi changé le z-index de la mémoire Flash de la boîte, mais il ne fonctionne toujours pas.

Sans un lien, ou de l'ensemble de balisage, rien nous dire, c'est juste un sauvage deviner.
Il y a un lien là-bas...
qui version de Firefox vous intéresse? J'ai vérifié sa fonctionne bien sous IE, mais je ne peux pas voir l'aperçu de l'image dans FF et Chrome.
Dans mon cas, j'ai eu un problème avec IE et FF et qu'il travaillait en Chrome. Dans FF et IE, flash a été mal chevauchement de la dynamique contextuelle des objets. Il a été fixé par <param name="wmode" value="transparent"> à l'intérieur de la <object> balise comme indiqué dans le css-tricks.com/snippets/html/keep-flash-behind-other-elements
Smickie, Vous devriez probablement formuler votre question de mieux, il n'est pas clair ce qui a été se chevauchent ce qui dans votre cas.

OriginalL'auteur Smickie | 2010-11-30

  1. 28

    Ajouter wmode="transparent" à votre <embed> tag. Comme ce qui suit.

    <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">

    Et cacher la div de la hello image si ce n'est pas nécessaire.

    J'espère que cela aide!

    que " wmode="transparent"' fera l'affaire =)
    Paramètre wmode="opaque". Aussi, si vous utilisez <object>, il suffit de l'ajouter en tant que <param name="wmode" value="transparent/opaque". Enfin, si vous utilisez SWFObject, assurez-vous de mettre le <param> à la fois l'intérieur et l'extérieur <object>.
    Cette solution ne fonctionne pas dans Chrome était 19.0.1084.52 m, Safari 5.1.7, mais fonctionne dans IE9.
    personne ne sait si il y a un bug déposé pour cette raison que je pourrais suivre?
    À l'intérieur de la <object> balise serait d'utiliser <param name="wmode" value="transparent"> comme indiqué dans le css-tricks.com/snippets/html/keep-flash-behind-other-elements

    OriginalL'auteur Zain Shaikh

  2. 4

    Il ya un couple d'options ici que je les vois:

    Option 1

    Utiliser le paramètre wmode tag et vous devez définir ce que l'objet est rendu. L'ajouter par la suite ne sera pas de travail
    (ref1) (ref2)

    À l'aide opaque devrait vous permettre de cibler l'objet avec la propriété CSS z-index styles. Être conscient que vous devez définir cette valeur dans le <embed> tag ainsi qu'une param
    (ref3) (ref4)

    Option 2

    Masquer l'objet jusqu'à ce qu'un utilisateur a cliqué sur votre bouton d'aperçu. J'ai passé du temps à traquer le javascript que vous avez utilisé avant, j'ai remarqué que Sotiris avait dit la même chose. Je crois que c'est votre code ici:

    $('#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;
});

    Je voudrais modifier une ligne à:

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

    Et utiliser les CSS pour définir la visibilité à caché par défaut. En fonction de votre pas de javascript conditions de prise en charge, vous devrez peut-être modifier que.

    Le troisième lien fourni ici est plutôt un bon article sur wmodes et comment ils fonctionnent - je vous recommandons de vérifier que si vous décidez d'aller avec l'option 1 et en difficulté.

    Espère que ça aide!

    Votre premier point est intéressant de reemphasizing: ajout du paramètre wmode après du rendu de l'objet ne fonctionnera pas. Vous avez à les attraper à l'avance. Donc pas de montant de jouer avec elle dans Firebug et proches de vous obtenir n'importe où.

    OriginalL'auteur lnrbob

  3. 2

    Aussi, j'ai eu un problème avec le z-index de Flash intégré objets lors de l'utilisation de Google Chrome 8. Tout fonctionnait parfaitement sous IE 7. lnrbob frappé le clou sur la tête avec son option 1 solution. J'avais mis wmode opaque dans le <embed> tag, mais j'ai oublié d'ajouter wmode comme un <param> tag. Une fois j'ai ajouté <param name="wmode" value="opaque"/> entre les <object> tag et le <embed> tag, le z-index a commencé à fonctionner à la perfection dans Chrome sans casser IE.

    OriginalL'auteur mongo

  4. 0

    Il ne fonctionne pas dans Firefox 3.6 et Opera 10, également dans Windows.

    Solution Possible: il suffit d'ajouter dans votre CSS visibility:hidden; pour le sélecteur #both_video_and_preview_image #video_wrapper.

    Puis ajouter jQuery (je vois que vous utilisez la bibliothèque), de sorte que lorsque l'utilisateur clique sur l'image d'aperçu, puis la visibilité de changement pour le au-dessus du sélecteur visible.

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

    OriginalL'auteur Sotiris

  5. 0

    le code suivant fonctionne dans ie,firefox,opera, mais pas travaillé sur chrome(version 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>
    div ajouter position:relative travaillera sur chrome.

    OriginalL'auteur jiucai

  6. -1

    Avez-vous essayé d'utiliser SWFObject et de le charger comme ça?

    Yup, ça n'aide pas.

    OriginalL'auteur adamzwakk