Comment faire jouer une vidéo automatiquement sur mon site web

J’ai cherché longtemps pour savoir comment faire jouer automatiquement une vidéo sur mon site web en HTML5, sur mobile et sur desktop, avant de trouver la réponse. Je vous la donne ci-bas.
Pour Youtube et Vimeo, c’est facile cependant.

Comment faire jouer autoplay une vidéo Youtube ou Vimeo automatiquement sur mon site web

---

C’est très facile. La procédure est identique pour Vimeo et Youtube.

Cependant, une chose à savoir c’est que les vidéos qui jouent automatiquement sur un site web joueront forcément sans le son. C’est une bonne idée de penser mettre des sous-titres à votre vidéo.

1. Prends le code de Embed de la vidéo Youtube. Il ressemble à
   <iframe width="560" height="315" src="https://www.youtube.com/embed/OeDlSjmNGbY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
2. À la fin de l’URL de la vidéo, ajoute ?&autoplay=1&mute=1. Ainsi, l’URL va ressembler à @https://www.youtube.com/embed/OeDlSjmNGbY?&autoplay=1&mute=1
3. Copie-colle ce code dans le HTML de ta page web

Comment faire jouer autoplay une vidéo HTML5 automatiquement sur mon site web

---

Cependant, une chose à savoir c’est que les vidéos qui jouent automatiquement sur un site web joueront forcément sans le son. C’est une bonne idée de penser mettre des sous-titres à votre vidéo.

Concrètement, la technique est de prendre une vidéo en HTML5, lui mettre des sous-titres par défaut, et la faire jouer en autoplay.

Également, on met un div par-dessus pour activer le son si jamais l’utilisateur clique dessus.

Pour voir un exemple qui fonctionne, cliquez ici.

<video id="video" autoplay muted playsinline loop onClick="this.pause(); this.muted=false; this.play();">
	<source src="XXXXX.mp4" type="video/mp4">
	<track label="English" kind="subtitles" srclang="en" src="clickthrough.vtt" default>
</video>
<style>
	video::cue {
		font-size: 150%;
	}
	video {
		width:100%;
	}
</style>

<div onClick="document.getElementById('video').muted=false; document.getElementById('video').pause();document.getElementById('video').play();"
	style="    z-index: 999;
    position: absolute;
    width: 100%;
    height: 700px;
    top: 0px;" >

<div>    

Recevoir par courriel

Votre adresse email

Recevoir 👉🏻