How to embed a YouTube video without an iframe to improve website performance (Audio)
What you will learn from this blog post
Iframe generally increases the time it takes to load a page. Hence, if you wish to improve the speed of your website, you may want to use YouTube videos on your website without an iframe. The purpose of this post article is to explain how you can achieve that. You will learn How to use a JavaScript library to display an anchor instead of an iframe, the process of showing your video in a popup.
You can download the code for the practical steps using the link below.
If you love this article, please comment or share.
Are you curious about how to Embed YouTube Video in HTML without IFrameEmbed YouTube videos in HTML without IFrame? Then, our blog article is for you. As you may have noticed, an iframe impacts your website’s load time. For instance, when you embed a video on your web page, it comes with additional CSS and JS that affect the speed of your page. So, in this article, we will talk about how you can use an anchor instead. And then, upon clicking on the link, the user will see the video on a popup modal.
For example, create a YouTube video without an iframe using a JavaScript library.
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 an iframe.
How does it work exactly?
There are several JavaScript libraries you can use. We also had the opportunity to work with numerous dependents 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:
- Download the Lity library from the GitHub website.
- In the dist folder, you will find lity.css and lity.js. You will include them in your project.
- 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=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.
Download the Lity library
and 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 compact 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>
Please have the code below in the location where you want to include the video.
<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. However, you can use additional CSS to improve the design and have an image that clarifies that it’s a video. You can, for example, use CSS to overlay the YouTube icon on the featured image of your video. 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 YouTube Video in HTML without IFrame
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 “integrate,” you will see a code on your right that you can copy for your website.
A summary of how to Embed YouTube Video in HTML without 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 play as a popup 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
Alternatives to iframes and JavaScript
the other options we are providing now may not improve the load time. However, for learning purposes, we will show you different approaches to embedding a YouTube video in HTML without iFrame.
Embed a YouTube video with the “embed” HTML 5 tag.
HTML 5 has a tag called “embed” that you can use to embed an external Youtube URL to your website. See the code below.
<embed src="https://www.youtube.com/watch?v=3betgHfbQXE" title="How to create a website" type="application/x-shockwave-flash">
The Youtube video is the URL you can copy from the youtube website. Note that the tag embed uses flash to display the video. However, it is not mandatory. Hence, you may do something similar to the example below.
<embed src="https://www.youtube.com/watch?v=3betgHfbQXE" title="How to create a website">
Embed a YouTube video with <object> tag
An alternative to adding a youtube video to your website is to use the object tag. The syntax of the object tag is similar to the iframe. So, all you will need to do is to copy the iframe version of youtube and replace the iframe tag with the tag object.
<object data='https://www.youtube.com/embed/nfk6sCzRTbM?autoplay=1'></object>
Thanks for taking the time to read our blog post. Please leave your message in the comment box if you have any questions. You may also contact us using the contact form on our website.
Leave a Reply