小編最近在製作棒球訓練營的展示網頁，剛好會需要用到將王建民的訓練宣傳影片加入到網頁中，為了達到在使用者進網頁後會有隨機與自動播放影片的功能，因此還需要藉由HTML搭配Javascript來實現，另外還有針對手機與電腦版之間影片大小的自適應方式進行教學。
網頁直接嵌入Youtube影片教學
步驟一：到想要嵌入Youtube影片頁面，並點擊右下角分享。
步驟二：點選嵌入。
步驟三：先設定嵌入選項，然後再將Embed Video內的HTML語法完整複製起來。
步驟四：在想要呈現Youtube的網頁的區域，將剛剛複製的HTML語法複製並貼上。
Youtube基礎嵌入影片呈現效果
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影片頁面 → 點擊分享 → 將下方網址進行複製。
步驟二：先點擊進入youtube響應式轉換網頁，並將剛剛網址貼上。
| 進入響應式轉換網頁 |
步驟三：下圖所紅框中的代碼進行複製。
步驟四：將複製的代碼完整的貼在需要顯示的HTML中即可。
延伸閱讀：