嵌入 YouTube 影片為音樂播放器教學，僅保留音樂點擊自動播放

如何將 YouTube 影片的「音樂」部分嵌入網站呢？或許很多人遇過類似問題，通常解決方法是利用轉檔工具擷取 YouTube 影片並轉檔為 MP3 格式，例如 JAYC.Audio、YT2MP3 和 Peggo 等服務都能做到，然後再把 MP3 上傳到音樂空間來產生內嵌代碼，這個方法非常費時，而且可能會有版權問題。

國外部落客 Labnol 分享了一段更為方便的程式碼，只要稍作修改就能將 YouTube 影片以音樂播放器模式嵌入網站來播放音樂。這個簡單的小工具結合官方 YouTube API ，而且無須進行轉檔，代碼只有七行，整體來說非常易用。

你可以將任何 YouTube 影片的音樂部分嵌入你的網頁，訪客會看到一個小小的播放按鈕，點擊後就能播放或暫停音樂。技術上來說，你也能讓 YouTube 影片音樂在背景播放，加上循環設定使它不間斷播送。

使用教學

開始前，你可以參考 Labnol 的範例頁面，查看音樂播放器在網頁內的運作效果。看起來就跟一般音樂播放器一樣，事實上 YouTube 影片是在背景播放。

STEP 1

首先，開啟要內嵌到網站的 YouTube 影片，複製 https://www.youtube.com/watch?v= 後方的這串影片 ID（目前為 11 個字元的字串），如同下圖選取的部分。

STEP 2

接著複製下面的程式碼，將「VIDEO_ID」部分替換為前面取得的影片 ID。

.gist table { margin-bottom: 0; }

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters

Show hidden characters

	<div data-video="VIDEO_ID"
	data-autoplay="0"
	data-loop="1"
	id="youtube-audio">
	</div>
	<script src="https://www.youtube.com/iframe_api"></script>
	<script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>