[教學] 如何將 YouTube 影音變身音樂播放器嵌入網站?

[教學] 如何將 YouTube 影音變身音樂播放器嵌入網站?

對於有在經營部落格或是個人網站朋友,想放置 MP3 音樂播放,又找不到平台上傳,因而感到不知所措??過往可能藉由音樂播放器 js 元件套用網站,但對於不懂程式碼朋友肯定感到困擾,其實也沒有想像中的麻煩,現在只要在影音平台 YouTube 找到喜愛歌曲 (須符合 CC 創作規範),就可以免上傳音樂檔,直接崁入 YouTube 變身音樂播放器自動放送歌曲囉!!


YouTube 崁入網站:

 

 

若是已經在 YouTube 平台找好想聽的音樂,又不懂程式碼該如何崁入??其實只要參照下列簡單 CSS 原始碼,就可以呈現出上述效果,是否看起來更加精簡呢 ~

 

<div style="position:relative;width:350px;height:40px;overflow:hidden;">

  <div style="position:absolute; left:-5px; top:-255px; z-index:1;">

    <iframe width="350" height="300" src="https://www.youtube.com/embed/youtubeID?rel=0"></iframe>

  </div>

</div>

 

步驟:你只需要將標註紅色 youtubeID 修改為該影片 ID,就能夠輕鬆地放置到自己的網站。

 

[教學] 如何將 YouTube 影音變身音樂播放器嵌入網站?

[教學] 如何將 YouTube 影音變身音樂播放器嵌入網站?

 

至於 YouTube ID 又是甚麼,該從哪裡找到他呢??你可以點擊影片下方分享,即可看到那串隨機代碼,只要到你的網站選擇 HTML 模式貼入語法就能顯示。(必須支援 iFrame 代碼)

 

備註:崁入影片須符合【創用 CC】規範,才不會侵犯智慧財產權。

 

留言板