Vous avez déjà réussi à intégrer une vidéo Youtube sur votre site WordPress (ou autre) mais vous souhaiteriez la faire lire automatiquement…
Pas de problème, nous allons tout de suite voir comment faire.
Obtenir le code EMBED pour intégrer votre vidéo
Pour cela rien de plus simple, il suffit de cliquer sur Partager puis Intégrer.
Vous allez alors obtenir le code embed (ou code d’intégration) suivant :
<iframe width="560" height="315" src="https://www.youtube.com/embed/Zvo3zTAkNH4?si=KOVpmnG2dM5vs_D2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
Mais le plus important, c’est de récupérer le lien de la vidéo, sans le paramètre « ?si= ».
Dans notre exemple, cela donne : https://www.youtube.com/embed/Zvo3zTAkNH4
Lancement automatique de la vidéo en complétant l’URL
Si votre lien de base est par exemple : https://www.youtube.com/embed/Zvo3zTAkNH4
Ajoutez simplement : ?autoplay=1&mute=1
Ce qui donne : https://www.youtube.com/embed/Zvo3zTAkNH4?autoplay=1&mute=1
Dans votre iFrame, cela pourra donner quelque chose du style :
<iframe width="600" height="300" src="https://www.youtube.com/embed/Zvo3zTAkNH4?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
Et voilà, désormais votre vidéo se lance automatiquement !
Pour info, ou pour les curieux, le paramètre «mute=1» est nécessaire car certains navigateurs bloquent l’autoplay quand la vidéo contient du son car cela peut être intrusif pour l’utilisateur.
Comment faire lire ma vidéo en boucle ?
Une vidéo est un bon élément à intégrer tout en haut de son site pour en faire un header (tête de page). Cependant, si vous ne la faites pas boucler, les visiteurs de votre site vont se retrouver avec le visuel d’une fin de vidéo Youtube au milieu de votre site, avec les fameuses vignettes qui proposent d’autres vidéos.
Typiquement ceci :
Pour éviter ce problème, il faut ajouter un autre paramètre qui fera boucler la vidéo : &loop=1&playlist=IdentifiantDeVotreVideo
Par exemple pour votre lien : https://www.youtube.com/embed/Zvo3zTAkNH4?autoplay=1&mute=1
Ajoutez simplement : &loop=1&playlist=Zvo3zTAkNH4
En prenant bien l’identifiant de votre vidéo de base, ici «Zvo3zTAkNH4»
Ce qui donne : https://www.youtube.com/embed/Zvo3zTAkNH4?autoplay=1&mute=1&loop=1&playlist=Zvo3zTAkNH4
Et une fois dans l’iFrame :
<iframe width="600" height="300" src="https://www.youtube.com/embed/Zvo3zTAkNH4?autoplay=1&mute=1&loop=1&playlist=Zvo3zTAkNH4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
Et voilà, ça fonctionne, une belle vidéo pour illustrer votre site, qui démarre tout seule et boucle sur elle-même, bravo !
Vous n’avez pas envie de vous embêter avec la technique ?
Contactez-nous, ça vous fera gagner du temps ! Nous nous ferons un plaisir de vous répondre le plus rapidement possible pour la création et la gestion de votre site web.