facebook

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

Si vous intégrez une vidéo YouTube sans iFrame sur votre site, vous réduirez considérablement le temps de chargement. En effet, les Iframes ont un impact assez néfaste sur le temps de chargement des sites web. Ceci est dû au fait qu’un iFrame est souvent accompagné des codes CSS ou JS du site mère. Dans cet article, nous allons vous comment vous pouvez remplacer les Iframes par une balise d’ancrage. Nous verrons également comment grâce aux API de Google vous pouvez automatiser le processus.

Intégration de la vidéo YouTube avec iFrame  sur un site

Intégration de la 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égration de la vidéo YouTube sans iFrame  sur un site

Si vous voulez intégrer une vidéo sans utiliser un iFrame, vous pouvez tout simplement télécharger et ajouter la librairie de JavaScript conçu à cet effet.  Une fois que c’est fait, vous pouvez utiliser la documentation pour replacer l’iFrame par un autre code alternative. Les étapes sont généralement les suivantes:

  • Allez sur le site web YouTube.com
  • Récupérez l’ID/L’URL de la vidéo
  • Ajoutez cet ID/URL dans votre code.

Une librairie de JavaScript que vous pouvez utiliser est Lily disponible sur GitHub

Ajouter le code CSS et 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>

Ensuite à l’emplacement où vous souhaiterez faire apparaitre les liens vers la vidée, vous devez utiliser le code ci-dessous:


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

Vous pouvez ensuite 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 similaire à 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>

Vidéo YouTube sans iFrame en résumé

Pour intégrer une vidéo YouTube sans iFrame sur votre site web, vous devez tout simplement 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.

Lectures recommandées

 



Abonnez-vous pour recevoir nos nouvelles directement dans votre boîte de réception.

X