Vous souhaitez savoir s’il existe une alternative aux iFrames pour intégrer une vidéo YouTube? Alors, cet article est fait pour vous. Ici, nous vous proposons un guide pour vous expliquer comment intégrer une vidéo YouTube sur votre site web sans utiliser d’iframe. Vous utiliserez juste une librairie JavaScript et un code HTML, tous deux disponibles gratuitement. De plus, cela sera bénéfice pour améliorer la performance de votre site web.

L’intégration d’une vidéo YouTube avec iFrame

Sur YouTube, les iFrames sont de petits codes associés aux vidéos. Ils aident à charger ces dernières facilement sur n’importe quelle page de votre site web. En effet, vous devez juste coller les codes dans le code de votre page pour que l’intégration se fasse. La procédure est très rapide et se fait en quelques étapes.

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

Si vous avez un site web statique HTML, l’intégration est facile. Pour cela, suivez la procédure suivante:

Allez sur le site YouTube
Recherchez la vidéo qui vous intéresse
Ensuite, cliquez sur « Partager » en dessous de cette vidéo
Dans les options de partage, vous verrez l’option « intégrer ».
En cliquant sur cette option (« intégrer »), vous verrez alors apparaitre un code à votre droite. Il vous suffira donc de le copier pour votre site web

Le problème des iFrames

Bien que les iframes procurent un moyen rapide pour intégrer les vidéos YouTube, il y a toutefois un revers de la médaille. En effet, ceux-ci ont un impact relativement néfaste sur la performance des sites web. Nous pouvons citer, par exemple, une croissance du temps de chargement. De plus, les iFrames possèdent des caractéristiques pas toujours indispensables pour vous. Notamment :

Ils contiennent d’habitude du code CSS et JS dont vous n’avez forcément pas besoin et qui alourdissent votre code.
Par ailleurs, ils affichent directement une capture du contenu d’un site externe sur votre page web. Par conséquent, cela peut créer des désagréments d’intégrité ou de sécurité pour votre site

Une alternative pour ajouter des vidéos YouTube sur votre site web

Grâce à JavaScript, il est possible de contourner l’utilisation d’un iFrame. Dans ce cas, vous utiliserez des librairies pour intégrer la vidéo sur votre site. Vous aurez ainsi le même rendu qu’avec l’utilisation d’un iFrame, tout en conservant le temps de chargement de vos pages.

Plusieurs librairies JavaScript sont à votre disposition pour intégrer les vidéos. Par ailleurs, nous avons eu l’occasion de travailler avec certaines d’entre elles pour plusieurs de nos projets. Ici, le choix de notre équipe se porte sur une librairie que nous vous recommandons fortement: la librairie Lity. Elle est en plus disponible gratuitement sur le site web GitHub.

La procédure pour la librairie Lity

Si vous optez pour notre recommandation, voici en trois points les étapes à suivre pour utiliser la librairie Lity:

Télécharger la librairie
Inclure dans votre projet deux fichiers CSS et JS à partir d’un dossier de la librairie
Faire usage d’un code HTML. Il s’agit simplement d’un lien HTML pour faire apparaitre la vidéo

<a href="https://www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>Bouton pour regarder la vidéo YouTube</a>

Au lieu d’un simple lien, vous pouvez alternativement ajouter une photo. Pour cela, vous devrez juste ajouter un peu de CSS et une photo illustrative du contenu de la vidéo à intégrer.

Dans la suite, nous vous donnons un guide détaillé des trois étapes de la procédure à suivre

Télécharger la librairie Lity

Visitez ce lien GitHub qui vous dirige directement sur la page de la librairie Lity. Sur votre écran, vous verrez donc une page semblable à l’image ci-dessous.

En cliquant sur le bouton « code », vous pourrez télécharger la librairie. Vous remarquerez probablement qu’il existe une version compressée et une autre qui ne l’est pas. Nous vous recommandons alors la version compressée. En effet, cela permettra d’économiser en temps de chargement.

Ensuite, dans le dossier «dist» de la librairie, identifiez les codes lity.css et lity.js à inclure dans votre site web. Puis, copiez-les.

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

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

Ajoutez le code CSS de même que JS de la librairie dans votre code HTML tel qu’il est 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, veuillez inclure le code suivant:


<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. Afin d’améliorer le design et avoir un visuel montrant que c’est une vidéo, vous pouvez utiliser un CSS supplémentaire. Vous pouvez notamment utiliser du CSS pour superposer l’icône de YouTube sur l’image mis en avant de votre vidéo. Pour vous aider, le code ci-dessous est un exemple de code CSS à 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 comparable à 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>

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. En la chargeant dans votre site, vous ferez ainsi abstraction de l’iFrame et par conséquent, vous optimiserez la performance de vos pages web. De plus, pour la majorité des cas, vous pourrez utiliser une balise d’ancrage dans laquelle vous logerez l’URL de votre vidéo. La vidéo sera ensuite jouée sous forme de modal. Nous trouvons donc cette approche plus commode et ergonomique.

En outre, notez que le lien à inclure dans votre ancrage diffère sensiblement du lien de l’iFrame. En effet, le lien pour iFrame est sous le format https://www.youtube.com/embed/loYKkRw73CI, avec la mention «embed» dans le lien. Alors que le lien pour l’ancrage est simplement l’URL de votre vidéo, notamment https://www.youtube.com/watch?v=loYKkRw73CI

Gilblas Ngunte Possi

Fondateur et Développeur Full-Stack chez Prositeweb.

Ma maîtrise des outils modernes, combinée à un sens d’analyse approfondi des technologies de l’information, me permet d’offrir un accompagnement de qualité dans la conception et la mise en place de vos solutions web.

Comment intégrer une vidéo YouTube sans iFrame?-Astuce pour améliorer la performance de votre site web.