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

问题

在我的博客中，有时我会使用其“共享>嵌入”代码插入嵌入式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视频，它几乎适用于所有内容：在这种情况下，什么也不会显示。

在这里可以轻松进行测试：现场演示。 在浏览器中执行“打印”，“打印预览”将显示空白图像。

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

已在Windows的Chrome 69中测试。

html css google-chrome printing youtube

回答

您有很多选择，可以使用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>

回答

根据已接受答案的想法，这是另一种实现方法：

 .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="">