Lite YouTube Embeds - Une meilleure méthode pour intégrer des vidéos YouTube sur votre site Web

Il est facile d'intégrer une vidéo YouTube, mais vous serez surpris de savoir combien de poids supplémentaire une seule intégration de vidéo YouTube peut ajouter à vos pages Web. Le navigateur doit télécharger environ 800 Ko de données (voir capture d'écran) pour rendre le lecteur vidéo YouTube seul. Et ces fichiers sont téléchargés avant même que le visiteur n'ait cliqué sur le bouton de lecture.

La vidéo YouTube intégrée augmente non seulement la taille en octets de vos pages Web, mais le navigateur doit effectuer plusieurs requêtes HTTP pour afficher le lecteur vidéo. Cela augmente le temps de chargement global de votre page, affectant ainsi la vitesse de la page et le score vital de votre site Web.

L'autre inconvénient du code d'intégration YouTube par défaut est qu'il affiche un lecteur vidéo de dimensions fixes et qu'il n'est pas réactif. Si les gens consultent votre site Web sur un téléphone mobile, le lecteur vidéo peut ne pas se redimensionner correctement pour le petit écran.

Intégrer des vidéos YouTube sans augmenter la taille de la page

Google+, aujourd'hui disparu, utilisait une technique très intelligente pour intégrer des vidéos YouTube. Lors du chargement initial de la page, Google+ n'intégrait que l'image miniature de la vidéo YouTube et le lecteur vidéo réel n'était chargé que lorsque l'utilisateur cliquait à l'intérieur de la miniature.

L'image de la vignette des vidéos YouTube a une taille d'environ 15 Ko, ce qui nous permet de réduire la taille des pages Web de près d'un Mo.

Démo d'intégration YouTube Lite

Ouvrez cette page de démonstration pour voir la technique Google+ en action. La première vidéo de la page est intégrée à l'aide du code IFRAME par défaut tandis que la deuxième vidéo utilise le mode simplifié qui charge la vidéo YouTube à la demande uniquement.

Lorsqu'un utilisateur clique sur le bouton de lecture, l'image miniature est remplacée par le lecteur vidéo YouTube standard avec la lecture automatique définie sur 1 afin que la vidéo soit lue presque instantanément. Le gros avantage est que le JavaScript YouTube supplémentaire n'est chargé que lorsque quelqu'un décide de regarder la vidéo intégrée et pas autrement.

Intégrations YouTube légères et réactives

Le code d'intégration standard pour YouTube utilise la balise IFRAME où la largeur et la hauteur du lecteur vidéo sont fixes, ce qui rend le lecteur non réactif.

Le nouveau code d'intégration à la demande pour YouTube est réactif et ajuste automatiquement les dimensions du lecteur en fonction de la taille de l'écran du visiteur.

Intégrer des vidéos YouTube de manière réactive - Tutoriel

Étape 1 : Copiez-collez l'extrait de code HTML suivant n'importe où dans votre page Web où vous souhaitez que la vidéo YouTube apparaisse. N'oubliez pas de remplacer VIDEO_ID par l'ID réel de votre vidéo YouTube.

 < div class = " youtube-player " data-id = " VIDEO_ID " > </ div >

Nous n'attribuerons pas de hauteur et de largeur puisque le lecteur vidéo occupera automatiquement la largeur du parent tandis que la hauteur est calculée automatiquement. Vous pouvez également coller plusieurs blocs DIV avec différents ID vidéo si vous devez intégrer plusieurs vidéos YouTube sur la même page.

Étape 2 : Copiez-collez le JavaScript n'importe où dans votre modèle Web. Le script trouve toutes les vidéos intégrées sur une page Web, puis remplace les éléments DIV par les vignettes vidéo et un bouton de lecture (voir démo).

 < script > /* * Light YouTube Embeds by @labnol * Credit: https://www.labnol.org/ */ function labnolIframe ( div ) { var iframe = document . createElement ( 'iframe' ) ; iframe . setAttribute ( 'src' , 'https://www.youtube.com/embed/' + div . dataset . id + '?autoplay=1&rel=0' ) ; iframe . setAttribute ( 'frameborder' , '0' ) ; iframe . setAttribute ( 'allowfullscreen' , '1' ) ; iframe . setAttribute ( 'allow' , 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' ) ; div . parentNode . replaceChild ( iframe , div ) ; } function initYouTubeVideos ( ) { var playerElements = document . getElementsByClassName ( 'youtube-player' ) ; for ( var n = 0 ; n < playerElements . length ; n ++ ) { var videoId = playerElements [ n ] . dataset . id ; var div = document . createElement ( 'div' ) ; div . setAttribute ( 'data-id' , videoId ) ; var thumbNode = document . createElement ( 'img' ) ; thumbNode . src = '//i.ytimg.com/vi/ID/hqdefault.jpg' . replace ( 'ID' , videoId ) ; div . appendChild ( thumbNode ) ; var playButton = document . createElement ( 'div' ) ; playButton . setAttribute ( 'class' , 'play' ) ; div . appendChild ( playButton ) ; div . onclick = function ( ) { labnolIframe ( this ) ; } ; playerElements [ n ] . appendChild ( div ) ; } } document . addEventListener ( 'DOMContentLoaded' , initYouTubeVideos ) ; </ script >

Étape 3 : Copiez-collez le CSS avant la balise de fermeture de votre modèle Web.

 < style > .youtube-player { position : relative ; padding-bottom : 56.25% ; height : 0 ; overflow : hidden ; max-width : 100% ; background : #000 ; margin : 5px ; } .youtube-player iframe { position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; z-index : 100 ; background : transparent ; } .youtube-player img { object-fit : cover ; display : block ; left : 0 ; bottom : 0 ; margin : auto ; max-width : 100% ; width : 100% ; position : absolute ; right : 0 ; top : 0 ; border : none ; height : auto ; cursor : pointer ; -webkit-transition : 0.4s all ; -moz-transition : 0.4s all ; transition : 0.4s all ; } .youtube-player img:hover { -webkit-filter : brightness ( 75% ) ; } .youtube-player .play { height : 72px ; width : 72px ; left : 50% ; top : 50% ; margin-left : -36px ; margin-top : -36px ; position : absolute ; background : url ( '//i.imgur.com/TxzC70f.png' ) no-repeat ; cursor : pointer ; } </ style >

Vous pouvez voir la technique d'intégration légère de YouTube en action sur cette page Codepen.

Veuillez noter que les navigateurs Chrome et Safari sur iPhone et Android n'autorisent la lecture de vidéos HTML5 que lorsqu'elles sont initiées par une interaction de l'utilisateur. Ils bloquent la lecture automatique des médias intégrés pour empêcher les téléchargements non sollicités sur les réseaux cellulaires.

Tutoriels d'intégration YouTube

1. Intégrer une vidéo YouTube avec le son coupé
2. Placez la vidéo YouTube comme arrière-plan de votre page Web
3. Intégrer juste une partie d'une vidéo YouTube