Лучший способ использовать iframe на любом веб -сайте

Что такое iframe в HTML? Tag TAG указывает встроенный кадр. Встроенный кадр используется для встраивания другого документа в текущий документ HTML. По сути, iframe используется для добавления другой веб -страницы на одну страницу.

Здравствуйте, ребята в этом уроке, мы постараемся решить упомянутый запрос. А также мы узнаем лучший способ использовать iframe на любом веб -сайте.

Общий запрос

1. Как использовать iframe
2. Как загрузить iframe на щелчок
3. Лучший способ использовать iframe

Во -первых, нам нужно создать три файла index.html , style.css и youtube-iframe.js {A JS -файл} Тогда нам нужно сделать код для него.

Как использовать iframe Шаг: 1

  
  
  
  
  
  
  
  
  


    

        

            
Before Optimize
            
        
        

            
After Optimize
            

        
    

Как использовать iframe Шаг: 2

Тогда нам нужно добавить код для style.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;
}        

Как использовать iframe Шаг: 3

Тогда нам нужно создать файл JS, в моем состоянии у меня есть файл JS {youtube-iframe.js} Добавьте ниже код в файл 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 = '', 
    play = '
';
    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);
}

Как использовать видео -вывод Iframe:

Фиксированный вывод кода Navbar:

Учебное пособие по JavaScript для начинающих

1. Как создать секундомер в JavaScript
2. Как создать пользовательское меню правой щелчки
3. Как создать цифровые часы в JavaScript

Оригинал: “https://dev.to/stackfindover/best-way-to-use-iframe-on-any-website-1ln9”