Vidéo Youtube intégrée réactive

Incorporer Youtube Video Responsive - Comment intégrer des vidéos youtube "intégrées" à un site Web pour être réactif? En gros, le code intégré "iframe" pour les vidéos youtube est très réactif sur de nombreuses tailles d'écran, mais le problème si vous utilisez le code incorporé youtube par défaut est généralement noir ou espace. barre au-dessus et au-dessous de la vidéo lorsqu’elle est visionnée sur un écran plus petit, tel qu’un appareil mobile.

Donc, pour surmonter ce problème, je vais partager une combinaison simple entre javascript, jquery, htlm et css, qui sert à éliminer les barres d'espace ou noires et à rendre l'affichage iframe de vidéos youtube plus réactif lors de l'intégration "embed" sur les pages Web. Voici le code youtube responsive jquery embed.

<script type = 'text / javascript'>
// <! [CDATA [
$ (document) .ready (fonction () {
$ ('iframe [src * = "youtube.com"] "). css ({" width ":" 100% "," height ":" 100% "," position ":" absolu "," haut ": "0", "left": "0"});
$ ('iframe [src * = "youtube.com"]')
.wrap ('<div style = "height: 0; width: 100%; position: relative; margin: 0 auto; padding-bottom: 56.25%; débordement: hidden"> </ div>');
$ ('iframe [src * = "youtube.com"] "). each (function () {
$ (this) .attr ("src")
});
});
//]]>
</ script>

Copiez et enregistrez le code de requête. Intégrez youtube responsive à la droite du tag </ body> dans le code HTML de votre site Web. le script / jquery gérera et ajustera les vidéos yrr de iframe youtube rapidement sans laisser d'espace ni de barre au-dessus et en dessous du vodeo youtube.

Pour son utilisation est très simple, après avoir enregistré le code jQuery dans la zone de corps ou la balise </ body> sur le site html, le code par défaut incorporer youtube peut être installé dans le message sans modifier le code "incorporé", mais la fonctionnalité de lecture automatique des vidéos doit être supprimée. tout d'abord, l'exemple suivant;

Le code par défaut youtube

<iframe width = "854" height = "480" src = "https://www.youtube.com/embed/Wwl1ZuLG80o" frameborder = "0" allow = "autoplay; encrypted-media" allowfullscreen> </ iframe>

Supprimez ensuite allow = "autoplay; encrypted-media" afin que la vidéo ne soit pas lue automatiquement, de sorte qu'elle devienne comme ceci;

<iframe width = "854" height = "480" src = "https://www.youtube.com/embed/Wwl1ZuLG80o" frameborder = "0" allowfullscreen> </ iframe>

Les paramètres de largeur et de hauteur de la vidéo iframe sur le code youtube emebed ne doivent pas être modifiés, car jquery gérera l’affichage des vidéos yrr iframe avec une grande responsabilité. Voir la démo dans la vidéo ci-dessous;

L'affichage ou l'affichage de la vidéo iframe ci-dessus a utilisé jquery pour définir la réponse. Il n'y a donc pas de barres noires (barre d'espace noire) visibles au-dessus ou au-dessous de la vidéo. Il y a quelque temps, j'ai expliqué comment retarder la sélection des vidéos yrrame iframe sur youtube. Dans cet article, je n'ai délibérément pas utilisé cette iframe sensible pour montrer la différence entre l'utilisation de jquery iframe réactif et de la technique de vérification différée [Check Here], bien que les deux scripts soient réellement utilisés. / defer iframe et jquery iframe reponsive javascript peuvent être combinés en une fonction à deux fonctions, à savoir affichage et accélération.

Donc, le tutoriel sur la façon de rendre responsive et 100% plein écran iframe youtube, espérons que ce script "responsive Embed youtube video" soit utile et ajoute à nos connaissances sur le codage et les blogs, je vous verrai de nouveau et vous remercie de votre visite.