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

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

國外部落客Labnol分享了一段更為方便的程式碼，只要稍作修改就能將YouTube影片以音樂播放器模式嵌入網站來播放音樂。

這個簡單的小工具結合官方YouTubeAPI，而且無須進行轉檔，代碼只有七行，整體來說非常易用。

你可以將任何YouTube影片的音樂部分嵌入你的網頁，訪客會看到一個小小的播放按鈕，點擊後就能播放或暫停音樂。

技術上來說，你也能讓YouTube影片音樂在背景播放，加上循環設定使它不間斷播送。

延伸閱讀： 如何嵌入YouTube影片設定自動重播、隱藏Logo或靜音播放？ 使用教學 開始前，你可以參考Labnol的範例頁面，查看音樂播放器在網頁內的運作效果。

看起來就跟一般音樂播放器一樣，事實上YouTube影片是在背景播放。

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

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

ThisfilecontainsbidirectionalUnicodetextthatmaybeinterpretedorcompileddifferentlythanwhatappearsbelow.Toreview,openthefileinaneditorthatrevealshiddenUnicodecharacters. LearnmoreaboutbidirectionalUnicodecharacters Showhiddencharacters viewraw youtube-audio-player.html hostedwith❤byGitHub 這裡有一些選項可以先進行設定調整，例如：將data-autoplay設定為1，音樂將會在頁面載入後自動播放。

如果將data-loop設定為1那音樂會循環播放直到手動停止。

STEP3 這個音樂播放器採用IFRAME技術，可以在電腦及行動裝置的瀏覽器正常播放。

另外技術部分JavaScript檔案是託管於Github，圖片則儲存於Imgur，如果你覺得尖峰時刻載入速度不如預期，也可以將它下載然後放到自己的網站空間。

根據原文章的說明，這個小工具使用YouTubeAPI播放器，但把寬度、高度設定為0，當使用者點選播放按鈕時，則會將YouTube影片播放狀態切換為播放或停止。

詳細程式碼細節可以參考Labnol網站原文，我個人認為這個小工具相當好用，特別是你想將某段音樂嵌入網站，又不希望把音樂託管到自己的空間而增加流量消耗時，相較於將音樂部分擷取下載後重新上傳，這個功能會更加安全些。

相關文章 OneLinePlayer免費網頁影音播放器，嵌入影片可自訂各種模式和按鈕樣式 如何嵌入YouTube影片設定自動重播、隱藏Logo或靜音播放？ YouTube已內建「循環播放」，自動重播影片歌曲免安裝外掛 IntroBar為特定來源訪客顯示歡迎訊息，方便網站發佈通知增加曝光效果 Pseric 學生時代成立網站以來堅持每日更新，在挖掘資料的過程中慢慢找出自己經營網站的方法，最開心的是有一群一起長大的讀者。

使用電子郵件訂閱網站 輸入你的電子郵件地址訂閱網站更新，使用電子郵件接收通知。

電子郵件地址 訂閱更新 追蹤更新 精選主題 思源黑體：Adobe與Google合作開發免費中文字型（SourceHanSans） 思源宋體NotoSerifCJK字型免費下載！中文開源字體推薦 Mipony白馬下載器：網路下載必裝！支援數百免空可突破下載限制 Spotify免費聆聽4000萬首歌，音樂串流應用iOS、Android版下載 日本亞馬遜AmazonGlobal線上購物直送台灣，免消費稅免找代購 中華郵政「i郵箱」初體驗，24小時自助郵局寄件取件超方便 YouTubeMusic免費音樂串流服務正式登場，升級Premium零廣告體驗 MicrosoftEdge正式版免費下載！微軟全新網頁瀏覽器 財政部統一發票兌獎APP掃描發票存手機，自動記帳主動對獎超方便 健保卡+戶號線上查勞保勞退年資、應繳欠繳保費和退休金試算 YouTubeKids兒童專用影音頻道，手機平板應用程式免費下載 Disney+台灣影音串流平台訂閱付款教學，最多可四螢幕同時觀看 以Outline搭配DigitalOcean架設VPN伺服器教學，每月最低5美元起 編輯推薦 NOMORERANSOM收錄超過170種勒索軟體解密工具下載 全家「超級好賣」免費將商品上架銷售，整合金流物流免手續費 JetpackBackup備份WordPress網站依日期或活動記錄快速復原 威注音輸入法vChewing免費下載！功能最完整Mac輸入法推薦 uBlacklist在Google搜尋結果封鎖、隱藏特定網站（Chrome、Firefox、Safari） 12個免費縮網址服務推薦，將網址縮短兼流量統計功能（2022最新） 25個免費相片壓縮工具推薦，讓檔案變小又不損壞畫質（2022最新） 5個去人聲免費工具推薦，音樂轉伴奏、擷取各種樂器聲音（2022最新） 28個免費線上去背工具推薦，全自動快速移除相片背景（2022最新） 19個免費YouTube影片下載工具推薦，轉檔MP4、MP3免安裝軟體（2022最新） 分享到...BufferCopyEmailFacebookFlipboardHackerNewsLineLinkedInMessengerMixPinterestPocketPrintRedditSMSTelegramTumblrTwitterVKWhatsAppXingYummly