Are you curious about how to embed a YouTube video on your website without using an iframe? This video is for you.
Iframes have a pretty big impact on website performance. As reasons:
Thanks to JavaScript, you can ignore the impact of an iframe on your website. For this purpose, the loading time of your pages will be similar to the pages of a site without iframe.
There are several JavaScript libraries you can use. We also had the opportunity to work with several dependent on the project. In this example, we are going to recommend the lity library. It is available for free on the GitHub website. Here are the steps to follow:
<a href =” https://www.youtube.com/watch?v=XSGBVzeBUbk ” data-lity>Bouton pour voir la vidéo YouTube</a>
If you want to add a photo instead of just a link, add some CSS and a picture representing your video content. Below are the more detailed steps.
visit the GitHub link, you will see a page similar to the image below.
In the dist folder, copy the CSS and JS codes to include in your website
You don’t have to include the compressed and uncompressed versions. We will recommend the compressed version to save loading time.
Add the CSS then JS code from the library into your HTML code as shown below:
<link href="lity.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="lity.js"></script>
In the location where you want to include the video, please include the code below
<a href="//www.youtube.com/watch?v=hngajJJgV6c" data-lity>Voir la vidéo</a>
The render will be a simple clickable link to bring up the video as a modal. To improve the design and have an image that clarifies that it’s a video, you can use additional CSS. You can, for example, use CSS to overlay the YouTube icon on the featured image of your video. The code below is a sample CSS code that you can use to customize your link.
/* 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;
}
The final YouTube video code without iFrame could be similar to the following.
<!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>
If you have a Static HTML website, to embed the YouTube video, you have certainly copied the code with the iFrame as shown via the steps below:
To embed a YouTube video without an iFrame on your website, you must use a JavaScript library that allows you to bypass the iFrame to optimize the performance of your web pages. In most cases, you will have to use the anchor tag to add the URL of your video. The video will then be played as a modal. This approach is more practical and ergonomic.
It is essential to notice that the link you will include in your anchor differs from the iframe link. Indeed, the link for the iframe is in the format https://www.youtube.com/embed/loYKkRw73CI. On the other hand, the link for the anchor is the URL of your video. https://www.youtube.com/watch?v=loYKkRw73CI
