Best way to use iframe on any website | Improve Webpage Speed
2 min readApr 12, 2021
What is an iframe in HTML?
The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.
basically, an iframe is used to add another webpage to the same page.
Hello, guys In this tutorial we will try to solve the mentioned query. and also we will learn the best way to use iframe on any website.
Common Query
- How to use an iframe
- How to load an iframe on click
- Best way to use an iframe
First, we need to create three files index.html, style.css and youtube-iframe.js { a JS file} then we need to do code for it.
How to use iFrame Step:1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Best way to use iframe in website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="youtube-iframe.js"></script>
</head>
<body>
<div class="iframe-outer">
<div class="simple-iframe">
<h2>Before Optimize</h2>
<iframe width="424" height="238" src="https://www.youtube.com/embed/OaEds7xQmkw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="optimize-iframe">
<h2>After Optimize</h2>
<div class="youtube-player" data-id="OaEds7xQmkw"></div>
</div>
</div>
</body>
</html>How to use iFrame Step:2
Then we need to add code for style.css which code I provide in the below screen.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Oswald', sans-serif;
}
body {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
background: #f2f4f6;
overflow: hidden;
}
.iframe-outer {
display: flex;
column-gap: 20px;
}
.youtube-player img {
object-fit: cover;
}
.iframe-outer > div {
position: relative;
}
.play {
height: 72px;
width: 72px;
left: 40%;
top: 45%;
background: url(play.png) no-repeat;
cursor: pointer;
position: absolute;
}How to use iFrame Step:3
Then we need to create a JS file, in my condition I have a JS file { youtube-iframe.js } add below code inside the JS file.
document.addEventListener("DOMContentLoaded", function(){
var div, n,
v = document.getElementsByClassName("youtube-player");
for(n =0; n < v.length; n++) {
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = labnolThumb(v[n].dataset.id);
div.onclick = labnolIframe;
v[n].appendChild(div);
}
})
function labnolThumb(id) {
var thumb = '<img width="424" height="238" src="https://img.youtube.com/vi/OaEds7xQmkw/hqdefault.jpg" alt="youtube">',
play = '<div class="play"></div>';
return thumb.replace("ID", id) + play;
}
function labnolIframe() {
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.dataset.id + "?autoplay=1");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("width", "424");
iframe.setAttribute("height", "238");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}