Best way to use iframe on any website
Tags: html, css, javascript, beginners
Published: 2021-04-06 01:08:47

###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###
1. How to use an iframe
2. How to load an iframe on click
3. The 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###
```html
<!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.

```css
* {
  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.

```js
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);
}
```
###How to use iFrame Video Output:###
{% youtube MiV2CI-Y2c0 %}

###Fixed Navbar Codepen Output:###
{% codepen https://codepen.io/stack-findover/pen/xxgBrpp %}

###JavaScript Tutorial For Beginners###

1. <a href="https://blog.stackfindover.com/how-to-create-a-stopwatch-in-javascript/">How to Create a Stopwatch in JavaScript</a>
2. <a href="https://blog.stackfindover.com/how-to-create-a-custom-right-click-menu/">How to create a custom right click menu</a>
3. <a href="https://blog.stackfindover.com/how-to-create-a-digital-clock-in-javascript/">How to create a digital clock in JavaScript</a>