Que faire si la lecture YouTube HTML5 échoue

Solution à l'échec de la lecture YouTube HTML5 : 1. Ouvrez YouTube, recherchez la vidéo et cliquez sur Partager dans le coin inférieur droit de la vidéo ; 2. Sélectionnez Intégrer ; 3. Supprimez la largeur et la hauteur dans la balise iframe ; un élément parent de l'iframe. Définissez simplement un pourcentage auquel la vidéo remplit l'écran.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version HTML5, ordinateur DELL G3

Que dois-je faire si la lecture YouTube html5 échoue ?

Insérer une vidéo Youtube en HTML

Vous devez insérer une vidéo YouTube dans la page Web directement en utilisant la balise

---

Méthode :

Ouvrez YouTube, recherchez la vidéo et cliquez sur Partager dans le coin inférieur droit de la vidéo.

Choisissez d'intégrer et vous obtiendrez le code suivant :

<iframe width="560" height="315" src="https://www.youtube.com/embed"    frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Il s'agit d'une chaîne de contenu de balise iframe, mais ce code est placé directement dans le fichier d'échange et ne peut pas être débogué et adapté Bien.

Parce que la largeur et la hauteur sont fixes et ne peuvent pas être ajustées.

Solution :

Supprimez la largeur et la hauteur dans la balise iframe, afin que la vidéo directement obtenue soit compressée, ajoutez donc un élément parent à l'iframe

<div class="youtube">
       <iframe width="100%" class="elementor-video-iframe" src="https://www.youtube.com/embed" 　　　　　　frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>       </iframe></div>

Définissez la balise iframe en absolu positionnement, définissez la largeur et la hauteur à 100 % et positionnez l'élément parent de manière relative. Utilisez padding-bottom:% pour définir un pourcentage qui permet à la vidéo de remplir l'écran (peut être ajusté par vous-même)

.youtube{padding-bottom: 57%;position: relative;}.elementor-video-iframe{max-width: 100%;width: 100%;border: none;position: absolute;height: 100%;}

Dans ce cas. De cette façon, vous pouvez obtenir une vidéo adaptative, les styles CSS peuvent également être ajoutés vous-même.

Apprentissage recommandé : "Tutoriel vidéo HTML"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!