Question

我今天才知道我的1.2 MB网站（每个GTMetrix），其中550k是YouTube视频。

我的网站是一个WordPress网站，当前视频加载到iframe中。

我希望我的网站加载更快......而且不确定如何继续。如果我可以在点击之前不加载YouTube视频，而只是在那里放置缩略图，那么这似乎是正确的播放？

Answer 1

1。将“ scr”替换为“ data-src”

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/123456789" frameborder="0" allowfullscreen></iframe>

2。添加Javascript

function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;

与过去相比，现在您的网站加载速度更快。

我一直在关注此博客，它正在为我工作：http://www.codecanal.com/defer-parsing-javascript-youtube-videos/

Answer 2

你可以通过两个简单的步骤实现这一目标......

更新您的嵌入代码，例如flow ....

＆lt; iframe width =＆＃34; 560＆＃34;高度=＆＃34; 315＆＃34; SRC =＆＃34;＆＃34;数据-SRC =＆＃34; generic_youtube_url＆＃34; FRAMEBORDER =＆＃34; 0＆＃34;的allowFullScreen＆GT;＆LT; / iframe中＆GT;
这是java脚本部分....

function init（）{ var vidDefer = document.getElementsByTagName（＆＃39; iframe＆＃39;）; for（var i = 0; i

参考更多详情：

https://scottdeluzio.com/defer-parsing-javascript-youtube-videos/

https://varvy.com/pagespeed/defer-videos.html

P.S。我个人使用它并且它有效。

由于 Sabbir H

Answer 3

要做的最好也是更快的事情是用链接或图像替换视频iframe，然后在点击或其他事件中加载iframe。

Ahmed Essam为您提供了一个解决方案，但如果您不想或不知道如何在wordpress安装上编辑文件，嵌入视频缩略图插件就可以完成这项任务：

https://wordpress.org/plugins/embed-video-thumbnail/

你如何推迟在WordPress网站上为YouTube视频解析JavaScript？

3 个答案: