<h1>YouTube defer</h1>
<h2>- lazy loading -</h2>

<iframe class="youtube" data-src="https://www.youtube.com/embed/kCmkwkz_G3E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<img style="margin-top:1.5rem;width:90vw;" src="https://www.olympus-imaging.jp/product/dslr/e30/sample/images/index_image_07_l.jpg">

<script>
  function youtube_defer() {
    var iframes = document.querySelectorAll('.youtube');
    iframes.forEach(function(iframe){
      if(iframe.getAttribute('data-src')) {
        iframe.setAttribute('src',iframe.getAttribute('data-src'));
      }
    });
  }
  window.addEventListener('load', youtube_defer);
</script>

@import url('https://fonts.googleapis.com/css?family=Heebo:900');
body {
  text-align : center;
  font-family: 'Heebo', sans-serif;
  letter-spacing : .13rem;
  color : #333;
  background : #c2f0ff;
}
h1 {
  margin : 1.5rem 0 0 0;
}
h2 {
  margin : 0 0 1.5rem 0;
  font-size : 1rem;
}

iframe {
  width : 320px;
  height : 180px;
}

.youtube {
  cursor : pointer;
}