Êtes-vous curieux de savoir comment intégrer une vidéo YouTube sur votre site web sans utiliser d’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 sera 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:
- Téléchargez la librairie Lity sur le site web GitHub.
- Dans le dossier dist, vous trouverez lity.css et lity.js. vous allez les inclure dans votre projet.
- 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 regarder la vidéo YouTube</a>
Si vous désirez ajouter une 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 semblable à l’image ci-dessous.
Dans le dossier dist, copiez les codes CSS et JS à inclure dans votre site web
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 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>
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’il a été 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
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 commode et ergonomique.
Il est important de remarquer que le lien que vous inclurez dans votre ancrage est un peu différent du lien de l’iframe. En effet, le lien pour iframe est sous le format https://www.youtube.com/embed/loYKkRw73CI. Toutefois, le lien pour l’ancrage est l’URL de votre vidéo. https://www.youtube.com/watch?v=loYKkRw73CI
Share :
Do you have a project in mind? Contact our web agency for a free evaluation.
We are the experts in creating websites, online stores and functionalities for websites based in Montreal. Contact us today to create your website starting at $1,200.
npgilblas