Posted by : Hank Chan 20 June 2017

加入影片背景已經是 2017 年許多架站工具的基本功能了,這不僅僅是為了網站美觀,更重要的是影片能夠在短短的幾秒內傳達本來要花數十秒才能傳達的文字訊息。除此之外,影片更給使用者一種真實感,讓他們增加對你的品牌和你的商品的信任感。

Weebly in 3 Min 的首頁


在網站上嵌入影片有許多做法,包括大家長年熟悉的嵌入 Youtube embedded code 。但是相比會自動播放的影片背景,嵌入的 Youtube 影片需要使用者自行去點擊才會播放,這比較被動。而且嵌入的 Youtube 影片是無法用背景的方式呈現,除非你懂得如何更改程式碼。

直接嵌入的 Youtube 影片是不會自動播放的


當然這篇文章就是要教你如何透過幾個簡單的步驟更改程式碼,讓你的網路商店或是個人部落格也可以脫穎而出。不過在進入教學之前,讓我給各位介紹一下 Weebly 目前對影片背景的支援。 Weebly 有支援影片背景,但不幸的是這功能目前只提供給 Business Plan 用戶,而 Business Plan 用戶一個月的月費就超過 20 塊美金。如果你只是想要使用影片背景功能,那就只好 DIY 了。

首先進入 Weebly 後台程式修改。


進入到你想要修改的 html 頁面。這邊我選擇 landing.html ,也就是首頁。你也可以選擇其他頁面。


找到以下的程式碼

<div class="main-wrap">
  {{#sections}}
     <div class="container">
     {content}</div>
  {{/sections}}
</div>


在這程式碼的下方直接加上以下的 html code。你可以在 src=" 和 ? 之間更換 Youtube 影片連結。注意:Youtube 的影片連結是從 Youtube embed page 上的  code 擷取,而不是瀏覽器上的 search bar。



這樣就大功告成啦~!當然,修改影片背景有多種方法。以上的方法是為了操作簡單,將所有的程式碼都聚集在 HTML 上。如果你有信心將 CSS 分離出來,另外放置在 main-style.css 或
是 main.css 又或是 global.less 上的話,可以參考以下的 code。




如果你對自己的 JavaScript 有信心,也可以參考這篇部落格文章,利用 JavaScript 來設定影片背景的大小,自動播放,和靜音功能。雖然我個人認為利用 JavaScript 有點牛刀小試,不過還是提供以上這三種方法給各位看官。

後話:雖然在電腦網頁端上加入影片背景已經是個趨勢了,但影片背景目前沒有被行動瀏覽器所接受,因為影片不止耗手機上相對較小的處理器資源,更大幅增加行動上網的流量。 iPhone 和 Android 的行動瀏覽器在預設上都不支援網頁上的影片背景。所以在設計網站時,也要同時思考如何針對手機的限制做調整。

Leave a Reply

Subscribe to Posts | Subscribe to Comments

- Copyright © Hank Chan 的所思所想 - Skyblue - Powered by Blogger -