facebook pixel
Menu

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

Instructions précises pas à pas pour faire jouer automatiquement une vidéo HTML5, Youtube ou Vimeo sur votre site web en Autoplay

Fill this!

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>    
Comment faire jouer une vidéo automatiquement sur mon site web

Recevoir par courriel

Recevoir 👉🏻

Recevoir par courriel

Recevoir 👉🏻



If you continue to use our website, we'll assume that you agree to our privacy policy and accept its terms.