Démo des balises HTML5 <audio> et <video>

Une vidéo .mp4 avec pas mal d'options

Par défaut il n'y a pas de boutons de contrôle, et la vidéo ne se lance pas toute seule.

C'est dans les attributs de la balise vidéo qu'on indique les options :

<video src="video/lego.mp4" controls autoplay muted loop preload poster="img/johnny.jpg"></video>

Un fichier son .mp3

Même principe que pour une vidéo, mais avec une balise <audio>.

Si on n'indique aucune aoption/attribut, alors il n'y a pas de "player" (les boutons) et on n'a rien à voir du tout dans la page !

<audio src="audio/8-bit-Hip-Hop-Arcade-medium-loop.mp3" controls autoplay loop></audio>

Remarque : l'autoplay n'est pas pris en compte, parce que le navigateur interdit de lire dans son sans "intervention utilisateur" (genre un clic).
E ton n'y peut rien.

Une vidéo Youtube via une <iframe>

Le code html de l'iframe est fourni par youtube/vimeo via le bouton de partage sous la vidéo...

Sur le principe, une ifram est un trou dans la page...
Ce que vous voyez ci-dessous c'est un trou, qui laiise voir une autre page web hébergée chez Youtube.

Syntaxe d'une iframe

<iframe src="la-page-a-afficher.html" frameborder="0"></iframe>

Côté CSS/mise en page, une iframe se comporte comme une image ou une vidéo, on peut lui donner une largeur, une hauteur, une bordure, etc

Par contre on ne peut pas styler ce qui se passe dans l'iframe, vu que c'est une page web séparée...

Une vidéo en fond de page !

Une simple histoire de CSS !
Il va falloir visiter le fichier CSS (ou utiliser l'inspecteur de page) pour comprendre comment ça marche...

Mais pour l'essentiel il a suffit de mettre la vidéo en position:fixed, et du lui mettre un z-index: -1... elle passe aussitôt SOUS la page !
Car par défaut tout les blocs html ont un z-index de 0.