Comment intégrer une vidéo youtube sans iframe dans le but d’améliorer la performance du site web


Votre site web sans iframe

Êtes-vous curieux de savoir comment intégrer une vidéo YouTube sur votre site web sans utiliser de iframe? Cette vidéo est pour vous. 

Les iframes ont un impact assez considérable sur la performance des sites web. Comme raisons: 

  • Ils ont généralement un ensemble de CSS et JS donc vous n’avez forcément pas besoin.
  • Ça affiche directement une capture du contenu d’un site externe sur votre page web. 

Approche alternative pour ajouter les vidéos sur votre site web

Grâce à JavaScript, vous pouvez faire abstraction de l’impact d’un iframe sur votre site internet. À cet effet, le temps de chargement de vos pages seront pareil aux pages d’un site sans iframe. 

Comment cela fonctionne exactement?

Il existe plusieurs librairies JavaScript que vous pouvez utiliser. Nous avons d’ailleurs eu l’occasion de travailler avec plusieurs dépendant du projet. Dans cet exemple, nous allons vous recommander la librairie lity. Elle est disponible gratuitement sur le site web GitHub. Voici les étapes à suivre: 

  1. Télécharger la librairie Lity sur le site web GitHub.
  2. Dans le dossier dist, vous trouverez lity.css et lity.js. vous allez les inclure dans votre projet. 
  3. Ensuite, dans votre projet, à l’emplacement auquel vous souhaitez faire apparaitre la vidéo utilisez le code ci-dessous. 

<a href= »https://www.youtube.com/watch?v=XSGBVzeBUbk » data-lity>Bouton pour voir la vidéo YouTube</a>
Si vous souhaitez ajouter un photo au lieu d’un simple lien, ajoutez un peu de CSS et une photo qui représente le contenu de votre vidéo. Ci-dessous les étapes plus détaillées. 

Télécharger la librairie Lity

visitez le lien GitHub, Vous verrez une page similaire à l’image ci-dessous. 

Comment intégrer une vidéo YouTube sans iframe dans le but d’améliorer la performance du site web

Dans le dossier dist, copiez les codes CSS et JS à inclure dans votre site web 

Lity CSS and JS

Vous n’avez pas à inclure la version compressée et non compressé. Nous vous recommanderons la version compressée pour économiser en temps de chargement. 

Inclure les codes CSS et JS de Lity et le lien dans votre projet

Ajouter le code CSS puis JS de la librairie dans votre code HTML tel qu’illustré ci-dessous:


<link href="lity.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="lity.js"></script>

À l’emplacement où vous voulez inclure la vidéo, je vous prie d’inclure le code ci-dessous


<a href="//www.youtube.com/watch?v=hngajJJgV6c" data-lity>Voir la vidéo</a>

Le rendu sera un simple lien à cliquer pour faire apparaître la vidéo sous forme de modal.  Pour améliorer le design et avoir une image qui laisse comprendre que c’est une vidéo, vous pouvez utiliser un CSS supplémentaire. Vous pouvez, par exemple, utiliser CSS pour superposer l’icône de YouTube sur l’image mis en avant de votre vidéo. Le code ci-dessous est un exemple de code CSS que vous pouvez utiliser pour personnaliser votre lien.


/* Code CSS */
.image-video {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin: 30px;
}
.image-video:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  content: "";
  font-family: FontAwesome;
  font-size: 100px;
  color: #fff;
  opacity: 0.8;
  text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
}
.image-video:hover:before {
  color: #FF0000;
}

Le code final de la vidéo YouTube sans iFrame pourrait être semblable à ce qui suit.


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Video Sans Iframe</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
  <style>
      @charset "UTF-8";
.video-thumbnail {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin: 30px;
}
.video-thumbnail:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  content: "";
  font-family: FontAwesome;
  font-size: 100px;
  color: #fff;
  opacity: 0.8;
  text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
}
.video-thumbnail:hover:before {
  color:  #FF0000;
}
  </style>
 <link href="youtube/dist/lity.css" rel="stylesheet"/>
</head>
<body>
<!-- partial:index.partial.html -->
<h2>CSS: Play button overlay</h2>
  <a  href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity><div class="video-thumbnail">
  <img src="https://www.prositeweb.ca/wp-content/uploads/2021/02/Video-Player-1.jpg" alt="Video thumbnail" />
</div></a>



<br />
v2.0
<!-- partial -->
  <script src="youtube/vendor/jquery.js"></script>
<script src="youtube/dist/lity.js"></script>
</body>
</html>

Comment Intégrer une vidéo YouTube avec iFrame sur un site

Si vous avez un site web Statique HTML, pour intégrer la vidéo YouTube, vous avez certainement copié le code avec l’iFrame tel qu’illustré via les étapes ci-dessous:

  • Allez sur le site YouTube
  • Recherchez la vidéo qui vous intéresse
  • Ensuite, cliquez sur Partager
  • Dans les options de partage, vous avez l’option « intégrer ».
  • Lorsque vous cliquez sur « intégrer », vous allez voir apparaitre un code à votre droite que vous pouvez copier pour votre site web
Intégrer une vidéo Youbut sur votre site web

Une démontration

Un résumé sur l’intégration d’une vidéo YouTube sans iframe

Pour intégrer une vidéo YouTube sans iFrame sur votre site web, vous devez utiliser une librairie de JavaScript qui vous permet de faire abstraction de l’iFrame pour optimiser la performance de vos pages web. Dans la grande partie des cas, vous aurez à utiliser la balise d’ancrage dans lequel vous ajouterez l’URL de votre vidéo. La vidéo sera ensuite jouée sous forme de modal. Cette approche est plus pratique et ergonomique.  

Il est important de remarquer que le lien que vous allez inclure dans votre ancrage est un peu différent du lien du iframe. En effet, le lien pour iframe est sous le format https://www.youtube.com/embed/loYKkRw73CI. Par contre, le lien pour l’ancrage est l’URL de votre vidéo. https://www.youtube.com/watch?v=loYKkRw73CI

Exemple iframe vs url

Avez-vous trouvé cet article utile ou perspicace ?

Oui            Non