使嵌入的 Youtube 视频缩略图可打印（@media print）

Question

在我的博客中，我有时会使用他们的 "Share > Embed" 代码插入嵌入的 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。在浏览器中执行 "Print"，打印预览将显示空白图像。

问题：如何在浏览器打印页面时有缩略图（与我们在视频未播放时在屏幕上看到的缩略图相同）？

测试 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="">

使嵌入的 Youtube 视频缩略图可打印（@media print）

Make embedded Youtube video thumbnail printable (@media print)

html

css

printing

youtube

google-chrome