[教學] 如何把 YouTube 變成音樂播放器放入網站裡?



想把某一首 MP3 音樂放到網站或部落格裡,卻不知道該怎麼做嗎?以往可能會想到透過一些媒體播放器的 js 元件來將音樂插入原始碼中,讓使用者可以直接在網頁裡播放音樂,不過這麼做其實相當麻煩,不但要自己上傳 MP3 音樂檔、還要耗費流量,實在很不划算。

如果 YouTube 上已經有你想要的音樂,但又不希望把過大的內嵌播放器放進網站裡的話,其實可以用一段簡單的 CSS 原始碼來把一般 YouTube 播放器改造成內嵌音樂播放器,呈現的效果如下:

看起來是不是精簡多了呢?

只要使用以下一小段的原始碼,然後修改 youtubeID 部分,加上你要內嵌進去的影片 ID,就可以把這個簡單的音樂播放器放到自己的網站裡。

<div style="position:relative;width:267px;height:25px;overflow:hidden;">
  <div style="position:absolute;top:-276px;left:-5px">
    <iframe width="300" height="300" 
      src="https://www.youtube.com/embed/youtubeID?rel=0">
    </iframe>
  </div>
</div>

要怎麼找到 YouTube ID 呢?點擊影片下方的分享 → 分享這部影片,後面那串隨機的字串就是了,把它加入上方的原始碼裡就可以將影片以音樂播放器的樣式入網站(網站必須支援 iFrame 代碼)。

 

資料來源:How to Embed YouTube as an Audio Player

Ten articles before and after

Facebook 推出新隱私捷徑,隱私設定更一目了然

如何在 Facebook 上刪除留言後快速發送訊息通知對方?

[教學] 如何在每次開機後自動連上網路?(PPPoE)

Facebook Messenger 手機即時通現已支援「語音訊息」

[教學] 在臉書聊天室對特定朋友顯示、隱藏上線狀態

[教學] 如何隱藏 Windows XP、7 或 Windows 8 桌面上的資源回收桶?

NTU YouTube EDU - 臺灣大學開設公開線上課程,趕快來成為臺大學生吧!

[教學] 如何快速選取多重資料夾中特定類型的檔案?

[教學] 如何在 iPhone 上使用舊版鍵盤配置?

Google Maps for iOS 來了!在 iPhone、iPad 上享受更快、更準確的 Google 地圖!