대체 삽입 방법으로 YouTube 링크를 제거하려면 어떻게해야합니까? (iframe이 아님)

Question

그래서 저는 100 개 이상의 유튜브 비디오가 포함 된 페이지를 가지고 있으며 동영상의 미리보기 이미지 만 렌더링 할 수 있도록 동영상을 포함시키는 다른 방법을 찾았습니다. 이렇게하면 페이지로드 시간이 훨씬 단축됩니다.

이

난 당신이 비디오를 클릭하면 iframe이에 사업부를 변경

<div class="video-container"><div class="youtube-player" data-id=" youtube id "></div> 

스크립트를 (어딘가에 구글에서 찾았)를 사용하는 것입니다

<script> 

     /* Light YouTube Embeds by @labnol */ 
     /* Web: http://labnol.org/?p=27941 */ 

     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 src="https://i.ytimg.com/vi/ID/hqdefault.jpg">', 
       play = '<div class="play"></div>'; 
      return thumb.replace("ID", id) + play; 
     } 

     function labnolIframe() { 
      var iframe = document.createElement("iframe"); 
      var embed = "https://www.youtube.com/embed/ID?autoplay=1"; 
      iframe.setAttribute("src", embed.replace("ID", this.dataset.id)); 
      iframe.setAttribute("frameborder", "0"); 
      iframe.setAttribute("allowfullscreen", "1"); 
      this.parentNode.replaceChild(iframe, this); 
     } 

    </script> 

CSS 스타일

<style> 
      .youtube-player { 
       position: relative; 
       padding-bottom: 56.23%; 
       /* Use 75% for 4:3 videos */ 
       height: 0; 
       overflow: hidden; 
       max-width: 100%; 
       background: #000; 
       margin: 5px; 
      } 

      .youtube-player iframe { 
       position: absolute; 
       top: 0; 
       left: 0; 
       width: 100%; 
       height: 100%; 
       z-index: 100; 
       background: transparent; 
      } 

      .youtube-player img { 
       bottom: 0; 
       display: block; 
       left: 0; 
       margin: auto; 
       max-width: 100%; 
       width: 100%; 
       position: absolute; 
       right: 0; 
       top: 0; 
       border: none; 
       height: auto; 
       cursor: pointer; 
       -webkit-transition: .4s all; 
       -moz-transition: .4s all; 
       transition: .4s all; 
      } 

      .youtube-player img:hover { 
       -webkit-filter: brightness(75%); 
      } 

      .youtube-player .play { 
       height: 72px; 
       width: 72px; 
       left: 50%; 
       top: 50%; 
       margin-left: -36px; 
       margin-top: -36px; 
       position: absolute; 
       background: url("//i.imgur.com/TxzC70f.png") no-repeat; 
       cursor: pointer; 
      } 

     </style> 

가능하면 YouTube에 다시 연결되는 링크를 삭제하려고합니다 (동영상 제목과 youtube 버튼에서보기) 이러한 것들이 이제 구식인지 확실하지 않지만, &modestbranding=1과 &showinfo=0을 iframe에 추가 할 수있는 것을 보았습니다.하지만이 방법은 동영상을 퍼가기 위해 다른 방법을 사용하고 있기 때문에 코딩 지식은 없습니다. HTML과 CSS로만 제한되며 스크립트에이 옵션을 사용하지 않도록 설정할 수있는 방법이 있습니까? 나는이 지식을 가진 사람에 명백한 보일 수 있도록 스크립트에 대해 아무것도 알고 있지만 ID가 ...,

iframe.setAttribute("modestbranding", "1"); 
iframe.setAttribute("showinfo", "0"); 

Answer 1

이러한 URL 매개 변수입니다 (그것이 작동하지 않았다) 그들에게 문자열을 추가이 추가하려고 생각하지 않습니다 iframe의 src 속성으로 설정됩니다.

function labnolIframe() { 
    var iframe = document.createElement("iframe"); 
    var embed = "https://www.youtube.com/embed/ID?autoplay=1&modestbranding=1&showinfo=0"; 
    ...