How to embed YouTube video without iFrame?-Tip to improve your website performance.

Want to know if there is an alternative to iFrames to embed a YouTube video? Then this video is for you. Here, we provide a guide for you on how to embed a YouTube video on your website without using an iframe. You will use a JavaScript library and HTML code, both free. In addition, improving your website’s performance will be beneficial.

Embedding a YouTube video with iFrame

On YouTube, iFrames are small codes associated with videos. They help to load these quickly on any page of your website. Indeed, you have to paste the principles in the regulation of your page for the integration to take place. The procedure is speedy and is done in a few steps.

How to embed a YouTube video with iFrame on a site?

If you have a static HTML website, integration is easy. To achieve this, follow the following procedure:

• Go to the YouTube site
• Find the video you are interested in
• Then click Share below this video
• In the sharing options, you will see the “embed” option.
• By clicking on this option (“integrate”), you will see a code appear to your right. So, all you have to do is copy it for your website.

The problem with iFrames

Although iframes provide a quick way to embed YouTube videos, there is a downside. Indeed, these have a relatively negative impact on the performance of websites. We can cite, for example, an increase in loading time. In addition, iFrames have characteristics that are not always essential for you. Notably :

• They usually contain CSS and JS code that you don’t necessarily need, and that weighs down your code.
• In addition, they directly display the content of an external site on your web page. Therefore, this can create integrity or security inconveniences for your site.

An alternative to adding YouTube videos to your website with an iFrame

Thanks to JavaScript, it is possible to bypass the use of an iFrame. In this case, you will use libraries to embed the video on your site. You will thus have the exact rendering using an iFrame while maintaining the loading time of your pages. Several JavaScript libraries are available to integrate videos. Moreover, we had the opportunity to work with some of them on numerous projects. Here, the choice of our team is a bookstore that we strongly recommend: the Lity bookstore. It is also available for free on the GitHub website.

The procedure for the Lity library

If you opt for our recommendation, here are three steps to follow to use the Lity library:

1. Download the library
2. Include in your project two CSS and JS files from a library folder
3. Make use of an HTML code. It is simply an HTML link to display the video.

 < a href =" https://www.youtube.com/watch?v=XSGBVzeBUbk" data-lity > Button to watch YouTube video </ a >

Instead of a simple link, you can alternatively add a photo. For this, you will have to add some CSS and an illustrative picture of the content of the video to be integrated. In the following, we give you a detailed guide to the procedure’s three steps.

Download the City Library.

Visit this GitHub link, which takes you directly to the Lity library page. You will see a page similar to the image below on your screen. You can download the library by clicking the “code” button. Furthermore, you will probably notice a compressed version and another that is not. We then recommend the compact version. Indeed, it will save loading time. Then, in the “dist” folder of the library, identify the lity.css and lity.js codes to include in your website. Then copy them.

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

Add the CSS as well as JS code from the library in your HTML as shown below:

<link href="lity.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="lity.js"></script>

Where you want to include the video, please have the code next:

<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 a visual showing that it is a video, you can use additional CSS. In particular, you can use CSS to superimpose the YouTube icon on the featured image of your video. To help you, the code below is an example of CSS code 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>

A summary of how to embed a YouTube video without an iFrame

You must use a JavaScript library to embed a YouTube video without an iFrame on your website. By loading it into your site, you will bypass the iFrame and therefore optimize the performance of your web pages. In addition, in most cases, you will be able to use an anchor tag in which you will place the URL of your video. The video will then play as a modal. We, therefore, find this approach more convenient and ergonomic.

Furthermore, note that the link to include in your anchor differs significantly from the iframe link. Indeed, the link for iFrame is in the format https://www.youtube.com/embed/loYKkRw73CI, mentioning “embed” in the link. While the link for the anchor is just your video URL, such as https://www.youtube.com/watch?v=loYKkRw73CI