How to embed a youtube video without iframe in order to improve website performance


Votre site web sans iframe

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: 

  • They usually have a set of CSS and JS, so you don’t necessarily need it.
  • It directly displays a capture of the content of an external site on your web page. 

Alternative approach to adding the videos to your website

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. 

How does it work exactly?

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: 

  1. Download the Lity library from the GitHub website.
  2. In the dist folder you will find lity.css and lity.js . you will include them in your project. 
  3. Then, in your project, at the location where you want the video to appear, use the code below. 

<a href =” https://www.youtube.com/watch?v=XSGBVzeBUbkdata-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. 

Download the Lity library

visit the GitHub link, you will see a page similar to the image below. 

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

In the dist folder, copy the CSS and JS codes to include in your website 

Lity CSS and JS

You don’t have to include the compressed and uncompressed versions. We will recommend the compressed version to save loading time. 

Include Lity’s CSS and JS codes and link in your project

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>

How to Embed a YouTube Video with iFrame on a Site

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:

  • Go to the site Youtube
  • Find the video you are interested in
  • Then click on Share
  • In the sharing options, you have the “integrate” option.
  • When you click on “integrate”, you will see a code appear on your right that you can copy for your website
Intégrer une vidéo Youbut sur votre site web

Watch Video

A summary on embedding a YouTube video without an iframe

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

Exemple iframe vs url

Did you find this post useful or insightful?

Yes            No