[YouTube Iframe ] optimization

index.html

 <div class="ytvideo">
   <a class="ytvideo__link" href="https://youtu.be/tTHiLxPHwWo" data-id="tTHiLxPHwWo">
     <picture>
       <img class="ytvideo__media img lazyload" data-src="http://img.youtube.com/vi/tTHiLxPHwWo/0.jpg" alt="Отзыв">
     </picture>
   </a>
   <button class="ytvideo__button" type="button" aria-label="Запустить видео">
     <svg width="68" height="48" viewBox="0 0 68 48">
       <path class="ytvideo__button-shape" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path>
       <path class="ytvideo__button-icon" d="M 45,24 27,14 27,34"></path>
     </svg>
   </button>
</div>

video.css

/* YouTube video */
.ytvideo {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.ytvideo__link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ytvideo__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.ytvideo__media.img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: auto;
}

.ytvideo__button {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: none;
    padding: 0;
    width: 68px;
    height: 48px;
    border: none;
    background-color: transparent;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.ytvideo__button-shape {
    fill: #212121;
    fill-opacity: 0.8;
}

.ytvideo__button-icon {
    fill: #ffffff;
}

.ytvideo__button:focus {
    outline: none;
}

.ytvideo:hover .ytvideo__button-shape,
.ytvideo__button:focus .ytvideo__button-shape {
    fill: #ff0000;
    fill-opacity: 1;
}

/* Enabled */

.ytvideo--enabled {
    cursor: pointer;
}

.ytvideo--enabled .ytvideo__button {
    display: block;
}

video.js

// Load YouTube on click
function findVideos() {
  var videos = document.querySelectorAll('.ytvideo');

  for (var i = 0; i < videos.length; i++) {
    setupVideo(videos[i]);
  }
}

function setupVideo(video) {
  var link = video.querySelector('.ytvideo__link');
  var media = video.querySelector('.ytvideo__media');
  var button = video.querySelector('.ytvideo__button');
  var id = link.getAttribute('data-id');

  video.addEventListener('click', () => {
    var iframe = createIframe(id);

    link.remove();
    button.remove();
    video.appendChild(iframe);
  });

  link.removeAttribute('href');
  video.classList.add('ytvideo--enabled');
}

function createIframe(id) {
  var iframe = document.createElement('iframe');

  iframe.setAttribute('allowfullscreen', '');
  iframe.setAttribute('allow', 'autoplay');
  iframe.setAttribute('src', generateURL(id));
  iframe.classList.add('ytvideo__media');

  return iframe;
}

function generateURL(id) {
  var query = '?rel=0&showinfo=0&autoplay=1';
  return 'https://www.youtube.com/embed/' + id + query;
}
findVideos();