如何將內嵌到網站中的Youtube影片變成音樂播放器


昨天在「How to Embed YouTube Videos as an Audio Player」中看到這篇蠻不錯介紹,內容是教我們如何把Youtube的影片內嵌到我們的網站上,但不顯示影片部分,只播放聲音,簡單的來說就是內嵌後可以變成一個音樂播放器,這樣一來,以後有什麼想要聽的歌,都可以由Youtube上的廣大資料庫中內嵌到網站來了,還是不懂的話,請看文中的範例就知道囉。

使用教學

內嵌所需的語法如下:

<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>

在上面的語法中,我們要把「youtubeID」換成Youtube影片上的影片ID,最後再內嵌到我們的網站上就行了,或許有人會問如何取得Youtube影片的ID,其實很簡單:在影片的網址中,位於等號(=)後面的那一堆字串就是ID了,各位可以參考下面的示意圖:

以下就是以最近爆紅的PSY GANGNAM STYLE(江南Style – 騎馬舞) 所做的實際範例,播播看吧,是不是可以正常播放呢?這樣的效果就是把影片的部分隱藏起來了,純粹當做音樂播放器:

延伸閱讀:
如何使用Google Media Player內嵌MP3到網誌中播放(另含三種MP3播放器)
Yahoo!Media Player § 很方便的部落格MP3播放器
JW Flash MP3 Player 教學 § 讓Blog有精美的MP3播放器
酷狗 Kugou § MP3免費音樂空間,可將MP3播放器內嵌至網誌