blocks|key|1174416|text|要做到这一点，最好的方法是显示一个图像(理想情况下是缩略图，但没有理由不显示不同的图像)，并在单击图像时加载视频和所有相关的JS。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1174417|下面的方法只是如何做到这一点的一个例子，在生产中，最好是使用YouTube应用程序接口正确加载它，以便视频在单击时播放，而不是必须单击两次(他们使用iFrame嵌入禁用了带有声音的视频的自动播放)，但它应该给你一个很好的起点，因为你的问题只是简单地解决这个问题！|1174418|请注意，由于堆栈溢出的限制，下面的视频将不会播放，这是一个与以下代码完全相同的jsFiddle+here+that+works.。|offset|length|1174419|​|1174420|(+function()+{

	var+youtube+=+document.querySelectorAll(+".youtube"+);
	
	for+(var+i+=+0;+i+<+youtube.length;+i%2B%2B)+{
		
		var+source+=+"https://img.youtube.com/vi/"%2B+youtube[i].dataset.embed+%2B"/sddefault.jpg";
		
		var+image+=+new+Image();
				image.src+=+source;
				image.addEventListener(+"load",+function()+{
					youtube[+i+].appendChild(+image+);
				}(+i+)+);
		
				youtube[i].addEventListener(+"click",+function()+{

					var+iframe+=+document.createElement(+"iframe"+);

							iframe.setAttribute(+"frameborder",+"0"+);
							iframe.setAttribute(+"allowfullscreen",+""+);
							iframe.setAttribute(+"src",+"https://www.youtube.com/embed/"%2B+this.dataset.embed+%2B"?rel=0&showinfo=0&autoplay=1"+);

							this.innerHTML+=+"";
							this.appendChild(+iframe+);
				}+);	
	};
	
}+)();|code-block|syntax|javascript|1174421|html+{
	background-color:+#f3f3f3;
}
.wrapper+{
	max-width:+680px;
	margin:+60px+auto;
	padding:+0+20px;
}

.youtube+{
	background-color:+#000;
	margin-bottom:+30px;
	position:+relative;
	padding-top:+56.25%25;
	overflow:+hidden;
	cursor:+pointer;
}
.youtube+img+{
	width:+100%25;
	top:+-16.82%25;
	left:+0;
	opacity:+0.7;
}
.youtube+.play-button+{
	width:+90px;
	height:+60px;
	background-color:+#333;
	box-shadow:+0+0+30px+rgba(+0,0,0,0.6+);
	z-index:+1;
	opacity:+0.8;
	border-radius:+6px;
}
.youtube+.play-button:before+{
	content:+"";
	border-style:+solid;
	border-width:+15px+0+15px+26.0px;
	border-color:+transparent+transparent+transparent+#fff;
}
.youtube+img,
.youtube+.play-button+{
	cursor:+pointer;
}
.youtube+img,
.youtube+iframe,
.youtube+.play-button,
.youtube+.play-button:before+{
	position:+absolute;
}
.youtube+.play-button,
.youtube+.play-button:before+{
	top:+50%25;
	left:+50%25;
	transform:+translate3d(+-50%25,+-50%25,+0+);
}
.youtube+iframe+{
	height:+100%25;
	width:+100%25;
	top:+0;
	left:+0;
}|1174422|<div+class="wrapper">
	<div+class="youtube"+data-embed="U9t-slLl30E">
		<div+class="play-button"></div>
	</div>
</div>|1174423|1174424|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/fsxbr9ny/^0|0|0|13|P|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@$F|14|G|15|1|16]]|A|$]]|$1|H|3|I|5|6|7|17|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|18|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|19|8|@]|9|@]|A|$M|N]]|$1|Q|3|R|5|L|7|1A|8|@]|9|@]|A|$M|N]]|$1|S|3|I|5|6|7|1B|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|U|$V|$5|W|X|Y|A|$Z|10]]]]

<p>The best way to do this is to show an image instead (ideally the thumbnail but there is no reason why you couldn't show a different image) and load the video and all the related JS when the image is clicked. </p>

<p>The below method is just an example of how to do this, in production it would be better to actually load it properly using the YouTube API so the video plays on click instead of having to click twice, (they disabled autoplay for videos with sound using iFrame embedding) but it should give you a good starting point as your question was simply how to get around the problem!</p>

<p>Please note that due to restrictions on Stack Overflow the below video won't play, here is a <a href="https://jsfiddle.net/fsxbr9ny/" rel="nofollow noreferrer">jsFiddle here that works.</a> with exactly the same code as below.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>( function() {

	var youtube = document.querySelectorAll( ".youtube" );
	
	for (var i = 0; i &lt; youtube.length; i++) {
		
		var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
		
		var image = new Image();
				image.src = source;
				image.addEventListener( "load", function() {
					youtube[ i ].appendChild( image );
				}( i ) );
		
				youtube[i].addEventListener( "click", function() {

					var iframe = document.createElement( "iframe" );

							iframe.setAttribute( "frameborder", "0" );
							iframe.setAttribute( "allowfullscreen", "" );
							iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&amp;showinfo=0&amp;autoplay=1" );

							this.innerHTML = "";
							this.appendChild( iframe );
				} );	
	};
	
} )();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>html {
	background-color: #f3f3f3;
}
.wrapper {
	max-width: 680px;
	margin: 60px auto;
	padding: 0 20px;
}

.youtube {
	background-color: #000;
	margin-bottom: 30px;
	position: relative;
	padding-top: 56.25%;
	overflow: hidden;
	cursor: pointer;
}
.youtube img {
	width: 100%;
	top: -16.82%;
	left: 0;
	opacity: 0.7;
}
.youtube .play-button {
	width: 90px;
	height: 60px;
	background-color: #333;
	box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
	z-index: 1;
	opacity: 0.8;
	border-radius: 6px;
}
.youtube .play-button:before {
	content: "";
	border-style: solid;
	border-width: 15px 0 15px 26.0px;
	border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
	cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
	position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
	top: 50%;
	left: 50%;
	transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
	&lt;div class="youtube" data-embed="U9t-slLl30E"&gt;
		&lt;div class="play-button"&gt;&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1177815|text|LazyLoad很友好地做了这项工作。该插件不仅可以将延迟加载应用于图像，还可以应用于嵌入视频和Iframes。只需设置它并将“懒惰”作为类应用到YouTube+iframe。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1177816|下面是一个快速示例：|1177817|<script+src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.1/dist/lazyload.min.js"></script>
<script>var+lazyLoadInstance+=+new+LazyLoad();</script>
<iframe+class="lazy"+height="300"+width="500"+data-src="https://www.youtube.com/embed/YoutubeCode"></iframe>|code-block|syntax|javascript|1177818|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/verlok/vanilla-lazyload^0|0|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p><a href="https://github.com/verlok/vanilla-lazyload" rel="nofollow noreferrer">LazyLoad</a> is kind enough to do the job. The plugin does not only apply lazy load to images, but also to embed videos and Iframes. Just set it up and apply &quot;lazy&quot; as a class to the YouTube iframe.</p>
<p>Here is a quick example:</p>
<pre><code>&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.1/dist/lazyload.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;var lazyLoadInstance = new LazyLoad();&lt;/script&gt;
&lt;iframe class=&quot;lazy&quot; height=&quot;300&quot; width=&quot;500&quot; data-src=&quot;https://www.youtube.com/embed/YoutubeCode&quot;&gt;&lt;/iframe&gt;
</code></pre>


<p>Currently, if I put into a website some video via iframe code and use autoplay mode, I always get a very bad score on Google Pages Speed Insights. I found only one way to avoid the problem. It is lazy loading a video after 4 seconds delay. However, the described method is not good for user experience. 
Does somebody know a more appropriate way to fix that?</p>


The best way to put a youtube video into a website and get a good score from Google Page Speed Insight

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

目前，如果我通过iframe代码将一些视频放到网站上，并使用自动播放模式，我在Google Pages Speed Insights上总是得到一个非常糟糕的分数。我发现只有一种方法可以避免这个问题。在延迟4秒后加载视频是一种延迟。然而，所描述的方法对用户体验并不好。有没有人知道更合适的方法来解决这个问题？

问将youtube视频放到网站上并从Google Page Speed Insight获得高分的最佳方法
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将youtube视频放到网站上并从Google Page Speed Insight获得高分的最佳方法EN