Ê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:
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.
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:
<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.
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.
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>
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:
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
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