If you embed a YouTube video without iFrame on your site, you will significantly reduce the loading time. Indeed, Iframes have a rather negative impact on the loading time of websites. This is because an iFrame is often accompanied by CSS or JS codes from the parent site. In this article, we will show you… Continue reading How to embed a youtube video without iframe in order to improve website performance
If you embed a YouTube video without iFrame on your site, you will significantly reduce the loading time. Indeed, Iframes have a rather negative impact on the loading time of websites. This is because an iFrame is often accompanied by CSS or JS codes from the parent site. In this article, we will show you how you can replace Iframes with an anchor tag. We will also see how to use Google APIs. You can automate the process.
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:
If you want to embed a video without using an iFrame, you can download and add the JavaScript library designed for this purpose. Once that’s done, you can use the documentation to replace the iFrame with another alternate code. The steps are generally as follows:
A JavaScript library that you can use is Lily, available on GitHub
Add the CSS and JS code of the library in your HTML code as shown below:
<link href="lity.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="lity.js"></script>
Then at the location where you want to display the links to the video, you must use the code below:
<a href="//www.youtube.com/watch?v=hngajJJgV6c" data-lity>Voir la vidéo</a>
You can then use CSS to overlay the YouTube icon over 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 code of the YouTube video 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>
To embed a YouTube video without iFrame on your website, you need to use a JavaScript library that allows you to ignore the iFrame to optimize your web pages’ performance. 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.
