使嵌入式Youtube视频缩略图可打印(@media打印)

最后发布: 2019-09-24 16:06:03


问题

在我的博客中,有时我会使用其“共享>嵌入”代码插入嵌入式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="">