Vidéo HTML5 en ignorant les z-index
C'est donc ce que j'ai essayé jusqu'à présent:
<div id="video" style="position:absolute;margin-top: 231px;margin-left: 127px;">
<video width="520" height="390" style="z-index:-10;">
<source src="m/video.ogv" type="video/ogg">
<source src="m/video.mp4" type="video/mp4">
</video>
</div>
J'ai un menu fixe et lorsque le menu est sur la vidéo , la vidéo semblent ignorer le z-index. Im travaillant actuellement sur chrome windows avec pas de chance. Des idées?
Est-ce délibéré:
z-index:-10;
?
OriginalL'auteur Waymas | 2012-11-14
Vous devez vous connecter pour publier un commentaire.
Utiliser les css
position:absolute
propriété à la fois des éléments qui se chevauchent et essayer de donner des valeurs plus élevées que0
à laz-index
Voici de travail jsFiddle exemple.
css:
html:
Remarque: Utilisé superposition div pour désactiver les contrôles et vous pouvez utiliser n'importe quel contenu sur votre vidéo, comme dans jsFiddle exemple.
Source: Vidéo en arrière-plan sur un site web en jouant sur commande
Je sais que ça peut paraître fou, mais au moins sur google Chrome et apple Safari ça ne fonctionne pas toujours: la seule solution que j'ai trouvé était de mettre les éléments APRÈS la balise vidéo, dans le html.
Ce problème ne se produit pas plus. Si vous pensez que vous avez en face, vérifier d'autres options de première (pour moi c'était arrière-plan:transparent .css)
OriginalL'auteur Barlas Apaydin
La superposition doit également être un frère ou une sœur de la vidéo.
Il ne fonctionnera pas si la vidéo est un enfant de la superposition.
Travaux:
Doesnt Work:
Je l'ai seulement essayé cela en Chrome alors, toutes mes excuses si ce n'est pas universellement vrai.
OriginalL'auteur faber123
Sur votre superposition/l'élément du menu, utiliser:
Cela a fonctionné pour moi. Ma conjecture est qu'il déclenche le rendu 3d sur l'élément, ce qui élimine le z-index problème.
OriginalL'auteur Henrik Christensen