facebook

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… 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.

Integration of YouTube video with iFrame on a site

Integration of 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 option “integrate.”
  • When you click on “integrate,” you will see a code appear on your right that you can copy for your website.

Embedding YouTube video without iFrame on a site

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:

  • Go to the YouTube.com website.
  • Get the video ID / URL
  • Add this ID / URL in your code.

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>

YouTube video without iFrame in summary

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.

Recommended reading

 

Montréal

Our adress

9590 Boul Henri-Bourassa E Bureau 108, Montreal-Est, Quebec H1E 2S4, Canada

Subscribe to receive our news straight to your inbox.