FAT78 - Artisan numérique
 

> Lab > Fond vidéo

lundi 21 décembre 2020

Fond vidéo

Insertion d’une vidéo mp4 comme fond de page

Ci-dessous le code html à écrire en début d’article :

<div style="z-index:-20;position:fixed;top:0px;left:0px;width:100%;height:99vh;">
<video autoplay loop muted playsinline style="display:block;width:100%;">
<source src="http://www.fat78.net/IMG/mp4/monfichiervideo.mp4">
</video>
</div>
<div style="z-index:-10;position:fixed;top:0px;left:0px;width:100%;height:99vh;background-color:rgba(0, 0, 255, 0.01);">
</div>

Le "div" en dessous ("z=-20") contient l’affichage html5 de la vidéo avec les paramètres "autoplay loop muted playsinline" afin que la vidéo démarre automatiquement en boucle et sans le son. ("playsinline" est nécessaire pour le fonctionnement sur iPhone)

Au-dessus ("z=-10") une "div" avec fond transparent recouvre la vidéo et la isole des clicks de souris.

Ces deux "div" étant en "position ;fixed" elles restent ancrées à la fenetre du navigateur.

Le contenu de l’article n’est pas modifié : textes, images et médias sont affichés normalement au dessus du fond.


SPIP | | Plan du site | Suivre la vie du site RSS 2.0