Сделать встроенное видео на YouTube для печати миниатюр (@media print)

Question

В своем блоге я иногда вставляю встроенное видео Youtube, используя код «Поделиться> Вставить», например:

<iframe width="560" height="315" src="https://www.youtube.com/embed/sFrNsSnk8GM"
 frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; 
picture-in-picture" allowfullscreen></iframe>

В настоящее время я редактирую стиль @media print { }, чтобы сделать компиляциюстатьи моего блога для печати.Он работает практически для всего, кроме этих встроенных видео на Youtube: в этом случае вообще ничего не отображается.

Это можно легко проверить здесь: Live demo .Сделайте «Печать» в вашем браузере, предварительный просмотр печати покажет пустое изображение.

Вопрос: как получить миниатюру (такую ​​же, как та, которую мы видим на экране, когда видео еще не воспроизводится)) при печати страницы из браузера?

Протестировано с Chrome 69, Windows.

Answer 1

У вас есть много вариантов, вы можете сделать это с помощью js, css и html, выбор пути зависит только от вас.Я покажу вам самый простой с дополнительным HTML;)

.youtube-box {
  position: relative;
  width: 560px;
  height: 315px;
}

.youtube-box img {
  display: none;
}

.youtube-box iframe {
  z-index: 1;
}

@media print {
  .youtube-thumbnail {
    display: block !important;
    position: absolute;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

<div class="youtube-box">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/sFrNsSnk8GM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; 
      picture-in-picture" allowfullscreen></iframe>
  <img class="youtube-thumbnail" src="https://i1.ytimg.com/vi/sFrNsSnk8GM/0.jpg" alt="">
</div>

Однажды я сделал скрипт для ленивой загрузки youtube lazy-youtube .

Он заключается в том, что ятолько добавить такой div <div class="ytLazy__item" data-yt-type="5" data-yt-id="BsTKKhU_Mq8"></div> Я загружаю миниатюру и только нажимая значок воспроизведения загружает все сценарии из Yotube.Это намного лучше, чем упаковка iframe сразу:)

Этот скрипт можно расширить, включив этот эскиз при печати. ​​

ВТОРОЙ ПРИМЕР

window.addEventListener('load', () => {
  const iframeElement = document.querySelectorAll('.youtube-iframe');
  iframeElement.forEach(iframe => {
    const idYoutube = iframe.getAttribute('src').split('/').pop();
    const imgElement = document.createElement('img');
    imgElement.src = `https://i1.ytimg.com/vi/${idYoutube}/0.jpg`;
    imgElement.className = 'youtube-thumbnail';
    iframe.insertAdjacentElement('afterend', imgElement);
  });
});

.youtube-box {
  position: relative;
}

.youtube-box img {
  display: none;
}

.youtube-box iframe {
  z-index: 1;
}

.youtube-iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive::before {
  display: block;
  content: "";
}

@media print {
  .youtube-thumbnail {
    display: block !important;
    position: absolute;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

<div class="youtube-box embed-responsive embed-responsive-16by9">
  <iframe class="youtube-iframe" src="https://www.youtube.com/embed/sFrNsSnk8GM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Answer 2

Исходя из идеи принятого ответа, есть еще один способ сделать это:

.youtube-thumbnail { display: none; }
@media print {
.youtube { display: none !important; }
.youtube-thumbnail { display: block !important; }
}

<iframe class="youtube" width="560" height="315" src="https://www.youtube.com/embed/sFrNsSnk8GM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<img class="youtube-thumbnail" src="https://i1.ytimg.com/vi/sFrNsSnk8GM/0.jpg" alt="">