網頁嵌入Youtube影片

 

小編最近在製作棒球訓練營的展示網頁,剛好會需要用到將王建民的訓練宣傳影片加入到網頁中,為了達到在使用者進網頁後會有隨機與自動播放影片的功能,因此還需要藉由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中即可。

 

延伸閱讀:

YouTube音效庫》音樂、背景配樂、音效素材(免費下載)

部落格般新家,教你如何讓舊網站自動轉址到新網站

線上免費Youtube影片下載轉檔工具

線上看電視 – 免費第四台網路頻道懶人包

影音轉檔工具FormatFactory(免安裝版)