將Youtube影片當做網站背景

4 / 19, 2013 Google , 架站技巧

網站背景除了純色、漸層等效果以外,大多數還是使用圖片,影片則因為瀏覽器限制緣故,很難有突破性的發展,但是,難道不能用Flash之類的東西嗎?當然可以!!這時,Youtube派上用場啦!!幾單幾行HTML,做到用「Youtube影片當做背景」,音樂也可以撥出來喔!這實在是太~酷啦,當然要來雪兒(share)一下囉!


一、請到Youtube中該影片網址,點選「分享->嵌入」,取得嵌入代碼,應該會類似以下內容:

<iframe width="1280" height="720" src="http://www.youtube.com/embed/abcdefg123?rel=0" frameborder="0" allowfullscreen></iframe>

二、找到「src」中的值(範例為http://www.youtube.com/embed/abcdefg123,如果有?rel=0,請移除該段),然後再後面加上?autoplay=1&controls=0&showinfo=0&autohide=1,已範例而言,就是http://www.youtube.com/embed/abcdefg123?autoplay=1&controls=0&showinfo=0&autohide=1

以上聽的懂嗎?如果懂,請繼續第三步,請在後面加入

<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
  <iframe frameborder="0" height="100%" width="100%" 
    src="第二步取得的網址">
  </iframe>
</div>

四、把「第二步取得的網址」取代成剛剛在第二步教學中取得的網址(http://www.youtube.com/embed/abcdefg123?autoplay=1&controls=0&showinfo=0&autohide=1)
And…..That’s All(這就是全部要做的事),接下來去看看,是不是變成超酷的Youtube背景影片啦~

  • simon

    請問大大

    如果在免費的WEEBLY能否做相同功能

    謝謝

    • s3131212

      印象中不能

  • 很好的方法,很赞

    • s3131212

      謝謝

  • There’s also another way. You can use this jQuery plugin to do the job: http://pupunzi.com/#mb.components/mb.YTPlayer/YTPlayer.html

    It provides more flexibility such as adjusting the opacity of the movie, the aspect ratio and it handles layout different between browsers.

    • s3131212

      That’s a cool jQuery plugin!