网页嵌入Youtube影片

小编最近在制作棒球训练营的展示网页，刚好会需要用到将王建民的训练宣传影片加入到网页中，为了达到在使用者进网页后会有随机与自动播放影片的功能，因此还需要借由HTML搭配Javascript来实现，另外还有针对手机与电脑版之间影片大小的自适应方式进行教学。

网页直接嵌入Youtube影片教学

步骤一：到想要嵌入Youtube影片页面，并点击右下角分享。

步骤二：点选嵌入。

步骤三：先设定嵌入选项，然后再将Embed Video内的HTML语法完整复制起来。

步骤四：在想要呈现Youtube的网页的区域，将刚刚复制的HTML语法复制并贴上。

Youtube 影片自动播放教学

步骤一：在影片ID结尾加上

?rel=0&autoplay=1&loop=1

Youtube影片随机播放教学

步骤一：获取所有想要播放的影片ID(影片ID获取方式如下图蓝框)

步骤二：将影片代码填入以下程式码的指定区域。

备注：此部分需要有JavaScript的支援。

将以下程式码中的 pRpvdcjkT3k,Te4wx4jtiEA,efTj6UYzvk4 替换成要播放的影片ID

<script>
	var videos = ['pRpvdcjkT3k','Te4wx4jtiEA','efTj6UYzvk4'];  /* 将 pRpvdcjkT3k,Te4wx4jtiEA,efTj6UYzvk4 替换成要播放的影片ID */
	var index=Math.floor(Math.random() * videos.length);
	var html='<div id="video"><div style="text-align:center"><h3>Video</h3><iframe width="720" height="480"   src="http://www.youtube.com/embed/' + videos[index] + '?autoplay=1" frameborder="0" allowfullscreen></iframe></div></div>';
	document.write(html);
</script>

响应式网站(RWD)Youtube影片自动缩放大小

以下提供当您是用手机在运行程式的情况下，该如何搭配装置的尺寸来改变youtube影片的大小。

步骤一：进入到要分享的Youtube影片页面 → 点击分享 → 将下方网址进行复制。