✅ Comment insérer une vidéo YouTube avec démarrage automatique et sans son

Table des matières

Dans ce tutoriel, je vais vous apprendre comment insérer une vidéo youtube sur votre page web qui démarre automatiquement lors du chargement d'une page et n'a pas de son. Pour cela, nous allons utiliser l'API fournie par Youtbe. Il va falloir écrire du code en JavaScript, très peu en fait, commençons.

Étape 1
La première chose que nous devons continuer est l'identifiant de la vidéo que nous voulons télécharger. Pour cela, nous entrons sur YouTube et recherchons la vidéo souhaitée, l'identifiant de celle-ci viendra de v = dans l'URL, dans l'image suivante je vous montre un exemple :

Nous pouvons maintenant ajouter le script à notre page, ci-dessous j'explique quelques détails à prendre en compte.

Étape 2
Nous avons besoin d'un espace dans notre code HTML où ajouter le lecteur, pour cela nous utilisons un div, cette instruction dans le code est la suivante (l'identifiant est nécessaire pour la fonction que nous utilisons à partir de l'API):

Vous pouvez mettre l'identifiant que vous voulez, si vous le modifiez, notez que dans le code de l'étape 4, il apparaît également lors de la création du lecteur, vous devrez également le modifier, car il fait référence à ce div via l'identifiant.

Étape 3
Nous relions l'API YouTube à notre page, pour cela, nous écrivons l'instruction suivante :

Notez qu'il s'agit d'une charge asynchrone.

Étape 4
Nous ajoutons des balises de script (à la fin du corps lui-même), nous y créerons la fonction surYouTubeIframeAPIReady (). Le nom de la fonction, vous devez le laisser comme ceci. Dans cette fonction, nous allons configurer la largeur, la hauteur du lecteur, l'ID de la vidéo et quelques autres caractéristiques.

[color = # a9a9a9] Code avec l'API Youtube [/ color]

Quelques aperçus

L'ID vidéo doit être saisi dans ID vidéo.

Pour le démarrage automatique est utilisé lecture automatique, 1 sera qu'il démarre tout seul, si vous mettez 0, ce ne sera pas le cas.

Pour le faire taire, la fonction suivante est utilisée dans la zone des événements :

 onReady : fonction (e) {e.target.mute (); }

Vous pouvez également configurer le nombre de fois que la vidéo est répétée (boucle), si les commandes sont affichées, telles que la lecture, le volume, etc.

Voici le code complet :

Lors de l'ouverture du fichier contenant le code ci-dessus, le lecteur apparaîtra, comme le montre l'image suivante :

AGRANDIR