WebPerf : Charger le player Youtube à la demande

Je vous présente ici une petite technique à base de jQuery et de CSS permettant d’éviter le chargement systèmatique du player Youtube sur des pages embarquant une vidéo

Un player qui pèse

Sur une page embarquant simplement une vidéo Youtube, le chargement du player vous coûte environ 350Ko.

C’est vrai que la bande passante n’est pas pour nous, mais si comme moi vous chassez les kilos superflus pour arriver sous la barre mythique des 1Mo pour certaines pages stratégiques, alors il est peut-être intéressant de ce demander si il est nécessaire de charger un player SWF de 290Ko pour peut-être 1 visiteur sur 10 qui va cliquer sur le bouton play de la vidéo ?

Charger le player quand l’internaute veut visionner la vidéo

Le but est donc de charger le nécessaire pour lire la vidéo uniquement si le visiteur a l’intention de la visionner.

Il existe des solutions simples comme par exemple faire un lien vers la vidéo, ou afficher la vidéo dans une modal : Cela peut se faire facilement avec des plugins jQuery de type Fancybox ou ColorBox entre autres.

Ce que je propose comme solution convient si votre vidéo fait partie intégrante du design de la page : C’est à dire que vous avez intégrer le code d’intégration de Youtube dans votre page Web.

Récupérer la miniature de votre vidéo

Dans le code proposé vous pouvez utiliser n’importe quel image de votre choix pour illustrer votre vidéo. Dans mon exemple j’utilise la miniature par défaut de Youtube.

Sur Youtube, les URLs des miniatures sont les suivantes :

  • https://img.youtube.com/vi/identifiant-video/0.jpg
  • https://img.youtube.com/vi/identifiant-video/1.jpg
  • https://img.youtube.com/vi/identifiant-video/2.jpg
  • https://img.youtube.com/vi/identifiant-video/3.jpg

Il existe plusieurs formats de qualité, pour en savoir plus rendez-vous sur cette page : Stackoverflow.

Pour mon exemple j’utilise ce format : https://img.youtube.com/vi/identifiant-video/sddefault.jpg

Mise en oeuvre

Pour résumé, on va simplement afficher une image pour illustrer notre vidéo Youtube et lors du clique on va seulement lancer le chargement du player et la lecture de la vidéo.

À noter que cela est possible uniquement car Youtube autorise l’autoplay. Remercions les…. Ou pas.

Le code HTML

<div class="youtube-container" data-youtube="https://www.youtube.com/v/m46Z0-HXySo?rel=0&autoplay=1">
<img src="https://img.youtube.com/vi/m46Z0-HXySo/sddefault.jpg">
</div>

Donc là on a simplement une balise div avec à l’intérieur une balise img pour l’image illustrant notre vidéo. J’utilise les data-attributes pour spécifier l’url de la vidéo. Vous aurez remarqué le fameux autoplay=1 à la fin de l’URL pour permettre le lancement automatique de la lecture de la vidéo.

Le CSS

J’y ai ajouté un peu de CSS, ça permet de donner l’illusion à l’utilisateur qu’il est en présence du player Youtube.

.youtube-container {
 cursor: pointer;
 position: relative;
 display: inline-block;
 z-index: 0;
 background: black;
}
.youtube-container:after {
 position: absolute;
 top: 50%;
 left: 50%;
 content: ' ';
 background: rgba(31, 31, 30, 0.8);
 height: 48px;
 width: 68px;
 margin-left: -34px;
 margin-top: -24px;
 display: block;
 z-index: 1;
 border-radius: 3px;
 -webkit-transition: all .2s ease-in;
 -moz-transition: all .2s ease-in;
 -o-transition: all .2s ease-in;
 transition: all .2s ease-in;
}
.youtube-container:before {
 left: 50%;
 top: 50%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
 border-color: rgba(255, 255, 255, 0);
 border-left-color: #ffffff;
 border-width: 20px;
 margin-top: -9px;
 margin-left: -8px;
 z-index: 2;
 border-right-width: 20px;
 border-left-width: 18px;
 border-bottom-width: 10px;
 border-top-width: 10px;
}

Voici ce que ça donne :

Au survol le pseudo-bouton devient rouge. C’est beau non ?

Le JS

Pour le JS j’ai un petit bout de code jQuery, qui au clique sur l’image va simplement récupérer les dimensions du bloc, l’url de la vidéo et injecter le code d’intégration de Youtube dans le bloc contenant l’image.

<script type="text/javascript">
$('.youtube-container').on('click', function(){
 $(this).html('<iframe width="'+$(this).outerWidth()+'" height="'+$(this).outerHeight()+'" src="'+$(this).data('youtube')+'" frameborder="0" allowfullscreen></iframe>');
 $(this).addClass('load');
});
</script>

Le résultat

Vous pouvez tester ce bout de code ici

Au final j’ai perdu combien de kilos ?

Le résultat est que notre page pèse désormais environ 80ko  (avec jQuery) au lieu des 350ko initiaux, sachant qu’il est très probable que votre page charge déjà jQuery. Dans le cas contraire les puristes arriveront à adapter ce code en JavaScript pur 😉