↓ 今日學習重點 ↓
使用 HTML
<video>
Tag 放入影片並操作各種屬性使用 CSS 製作網頁的影片主頁橫幅 (Hero Image)
使用
<iframe>
嵌入YouTube 與各種 Social Media 影片
在設計行銷網頁時,放入漂亮的影片是最輕鬆達到吸睛效果的方法之一,例如:把影片放至滿版當成背景,上面再壓上標題與文字,畫面就會很豐富,這是很常見的網頁設計方式。
例如(以下都不是業配啦XD),
像資生堂的銀座旗艦店官網,也是使用這種方式設計開頭的:
SHISEIDO GLOBAL FLAGSHIP STORE | SHISEIDO
或是,在遊戲宣傳網頁,也很常使用這種手法,像是最近要推出的遊戲——無限暖暖:
《無限暖暖》官網——無論何時都要盛裝登場!
這種將大圖或影片放在開頭的區塊,通常被稱作「主頁橫幅 (Hero Image)」。今天我們就透過製作這樣的網頁,來練習用 HTML 的 <video>
Tag 放入影片,並且並操作影片的各種屬性吧!
此外,文章結尾還會提及如何放入用 <iframe>
嵌入YouTube 與各種 Social Media 的影片。
ㄧ、HTML <video>
1. 基本語法
要在網頁中放入影片我們會用以下語法,在 <video>
標籤中放入 <source>
標籤放入影片。
標準寫法
<video>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
你的瀏覽器不支援影片播放
</video>
<video>
標籤中可以放入多種影片來源,瀏覽器將選擇它的第一個來源的影片,如果不行播放的話再撥下一個,如果都無法播放才會顯示放在內部的文字。放在影片中的文字,是在瀏覽器不支援
<video>
標籤時才會出現。
簡寫
<video src="movie.mp4"></video>
如果覺得這樣的寫法太長,也可以使用用 src
這個屬性來指定影片檔案的路徑,不使用 <source>
。
2. 常用的屬性
其他 <video>
標籤最常用的屬性還有:
controls
:出現控制面板autoplay
:自動播放loop
:循環播放muted
:靜音播放preload
:決定影片如何在頁面載入時進行預載,有三個值可設定:none
:不預載影片,直到用戶按下播放按鈕。metadata
:只預載影片的 metadata(如影片長度等資訊)。auto
:預載整個影片檔案。
poster
:當影片尚未播放時顯示的圖片,作為縮圖或預覽圖,也可以當成是影片出不來時的替代圖片。如果沒有設定會取影片的第一幀當封面。width
與height
:除了使用 CSS 設定寬高外,也可以使用這兩個屬性設定寬高
這些屬性就是常用的屬性,不過 <video>
標籤還可以設定其他更細節屬性,詳細請看:
3. 注意事項
關於自動播放
如果在使用者沒有預期下自動播放出聲音,會對使用者體驗不好,所以現在多數瀏覽器預設都已阻擋這樣的行為,除非使用 JS 寫程式強制執行影片/音樂。
所以,如果需要影片能自動播放,必須要將影片/音樂設定為「靜音(muted
)」,影片才會自動播放喔!
<!-- 有操作介面 -->
<!-- 沒有設定靜音,自動播放無作用 -->
<video width="320" height="240" controls autoplay>
<source src="影片網址" type="video/mp4">
</video>
<!-- 自動播放 + 靜音 -->
<!-- 要設定為靜音,才允許自動播放 -->
<video width="320" height="240" autoplay muted>
<source src="影片網址" type="video/mp4">
</video>
詳細請看 DEMO:HTML video tag
也就是說,已經不太會發生「在上電腦課偷看部落格,部落格的影片或音樂自動放出聲音來,被老師發現的窘境」。😂
客製選單需要使用 JS
此外,如果要使用自行設計的選單按鈕,都需要使用 JS 操作,用原生的 HTML 只能使用瀏覽器的預設樣式。
4. DEMO
知道如何放入影片後,我們就可以來製作把影片當成背景的網頁了!
(使用這種方式建議注意影片大小,一來 load 不出來會影響使用者體驗,二來是過多的流量會對自己的網站造成 loading 負荷。)
這邊我們在主要內容區塊 .container
:用絕對定位填滿容器,再進行其他額外的排版。
而在 <video>
標籤上:
使用
object-fit: cover;
將影片填滿容器,然後使用
pointer-events: none;
阻止萬一點擊到影片,出現瀏覽器針對影片的操作選單(因為要當作背景,避免額外的互動,不過這個可有可無,因為將內容絕對定位在影片上,所以也點不到),另外,使用
poster
屬性設定了影片封面圖片,以防萬一影片跑不出來,還有預設圖可以看。
詳細的 code 與 DEMO 可參考下面:
HTML
<header>
<video autoplay muted loop
src="https://im1010ioio.github.io/super-easy-css/36/video.mp4"></video>
<div class="container">
<nav>
<ul>
<li><a href="#">商品說明</a></li>
<li><a href="#">參考行程</a></li>
<li><a href="#">交通說明</a></li>
<li><a href="#">行程規定</a></li>
</ul>
</nav>
<div class="text-content">
<h1>
<span class="line-1">馬爾他</span><br>
<span class="line-2">全世界最小的國家</span>
</h1>
<p>馬爾他(Malta)是位於地中海中心的一個小型島國,介於意大利西西里島和北非之間。這個國家由三個主要島嶼組成,分別是馬爾他島(Malta)、戈佐島(Gozo)和科米諾島(Comino)。雖然國土面積不大,但馬爾他有著悠久而豐富的歷史文化。</p>
<button type="button">開始探索</button>
</div>
</div>
</header>
CSS
header{
position: relative;
height: 80vh;
overflow: hidden;
color: white;
text-shadow: 0px .25rem .5rem rgba(0,0,0, .3);
}
video{
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
header .container{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0, .5);
display: flex;
flex-direction: column;
}
DEMO 連結:Video Full Background
二、YouTube 影片
既然提到了影片,那就順便說一下怎麼放 YouTube 影片吧!
1. 放入方法
官方放入方法
在 YouTube 照著以下步驟操作:分享 > 嵌入。
在嵌入的程式碼這個畫面往下拉,你會發現目前只有幾個選項可以設定:
設定開始時間
顯示播放器控制選項:
勾了以後就不會出現左下「在以下平台觀看:YouTube」的文字啟用隱私權加強保護模式:
勾了以後 YouTube 就不會記錄看影片的人的資訊
最後,你就會得到以下的 HTML code,只要貼上就可以了:
<iframe width="560" height="315" src="https://www.youtube.com/embed/owOqb70D07M?si=C0vKjuZJL-hkQBNR" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
當然你可以針對寬高(屬性 width
/ height
)的部分微調。
2. 我想要自動播放怎麼辦?
YouTube iFrame 的可調整參數
如果照著 YouTube UI 介面上操作,沒有辦法設定更詳細的設定,YouTube 提供了
IFrame Player API 文件,裡面有許多參數大家可以參考。使用方法是用 Query String 傳遞參數進去。
所謂的 Query String 就是直接在連結後面用 ?參數1=參數1的值&參數2=參數2的值
接起來就好,是傳遞參數的一種方式。不過,因為是透過網址公開的方式傳遞,通常都不是放機密資訊。
BUT!
BUT! YouTube 的 IFrame Player API 有些參數無作用(例如loop
),而有些參數不在文件內(例如mute
),僅供參考就好。XD
YouTube 自動播放
我查到要讓 YouTube 影片自動播放的話,要使用以下的 Code:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/pjFQOLTh7EU?autoplay=1&mute=1&controls=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
就跟前面提到關於自動播放,瀏覽器的限制一樣:
如果在使用者沒有預期下自動播放出聲音,會對使用者體驗不好,所以現在多數瀏覽器預設都已阻擋這樣的行為,除非使用 JS 寫程式強制執行影片/音樂。
所以這裡設定了靜音+自動播放,作為必要條件:
autoplay=1
mute=1
另外,我還加了 controls=0
,企圖讓播放器操作選單不見,不過結果是:選單大約要過 4 秒後才會自動消失,hover 過去影片上方就會出現選單。
詳細 DEMO 請看:YouTube Autoplay
3. <iframe>
標籤
在網頁偵測模式中,我們可以發現:嵌入 YouTube 影片的是一個叫做 <iframe>
的標籤,而 <iframe>
中包含著另外一份 HTML 網頁(<html>
)。
沒錯,這個標籤就是讓你在網頁中放入其他網頁的標籤,通常都是用來嵌入外部內容,如影片、地圖、社群貼文分享等等。但因為可能放入「其他網站的網頁」,可能會有安全性的問題,所以 <iframe>
有一些限制與問題:
跨域問題(Same-Origin Policy)
如果嵌入的內容與主頁面來自不同的來源(不同的域名、協議或端口),跨域安全策略會限制主頁面和嵌入的內容之間的互動行為。例如,無法通過 JS 去看或修改來自不同來源的
iframe
中的內容(如 DOM)。
解決方案可以是使用postMessage
API 在主頁面和iframe
之間安全地傳遞消息。安全性風險
嵌入來自不可信來源的內容可能會引入安全風險,如 XSS(跨站腳本攻擊)或點擊劫持(Clickjacking)。攻擊者可能利用
iframe
的嵌入來誘騙使用者進行不安全的操作。
使用sandbox
屬性可以限制iframe
中的功能,例如禁止腳本執行或表單提交,從而提高安全性。SEO(搜尋引擎最佳化)
搜尋引擎可能不會索引
iframe
中的內容,因為它們屬於嵌入的外部來源。這可能會影響嵌入內容的可見性,對於依賴 SEO 的網站來說是個限制。
如果內容對 SEO 非常重要,應考慮其他嵌入方法,而不是使用iframe
。
Youtube 嵌入設定了什麼?
allow
屬性:指定允許影片使用的功能:accelerometer
:允許影片使用加速計autoplay
:允許影片自動播放(但沒有作用)clipboard-write
:允許影片將內容複製到剪貼簿encrypted-media
:允許播放加密媒體gyroscope
:允許影片使用陀螺儀picture-in-picture
:允許影片以畫中畫模式播放web-share
:允許影片使用網頁分享功能
referrerpolicy
屬性:控制在跨域請求時,瀏覽器向伺服器傳送的 Referer 標頭資訊。
strict-origin-when-cross-origin
表示只傳送原始域,用於保護使用者隱私。
allowfullscreen
屬性:- 允許使用者將影片全螢幕播放。
三、IG/ TikTok/ X (Twitter) 影片
如果想放入其他 Social Media 的影片,雖然每家平台實作的方式會略有不同,不過一樣也是使用 <iframe>
的概念嵌入。
這邊就不一個個深入探討了,提一下從哪裡取得嵌入的 code 就好了。
1. Instagram
從 Instagram 網頁版,必須要是「公開貼文」,接著在貼文右上角的「點點點」後,就會出現「內嵌」選項,可勾選內容是否要包含貼文文字(包括解說)。
嵌入後,影片不能自動播放,要點擊後才會播放。
另外,如果影片不是使用「原始音訊」,而是使用 Instagram 內選用的音樂,點了不會播放影片,會變成連結至 Instagram(應該是因為版權因素)。
話說… 我喜歡這個迷因 🤣:
https://www.instagram.com/reel/CqIaUJAoZpc
2. TikTok
在 TikTok 網頁版中,會有一個「</>
」圖示的按鈕,點了就會直接出現程式碼了。
嵌入後,TikTok 的影片會靜音+自動播放。
3. X (Twitter)
在 X (Twitter) 網頁版中,和 IG 類似,點了貼文右上角的「點點點」後,就會出現「嵌入貼文」選項,然後會跳新視窗,讓你選想要以哪種方式呈現:
選了後會預覽給你看,直接複製就行囉!
話說… 我喜歡這個迷因 🤣:
https://x.com/jesselaunz/status/1805403344548016599
四、實際使用情境
影片是一種非常棒的行銷素材,如果能好好運用,能夠提高使用者的體驗與停留的時間。
(題外話,提高停留時間,說不定還能提高銷售額,在寫這篇文時我發現一間日本公司—— LEEEP 就是在做這件事,他們幫助電商收集在 Social Media 上與品牌或產品相關的影片,管理並且放到商品頁中。)
如果想要在網頁上放影片,建議可以在網站上放較短秒數吸引人的片段(如 15-30 秒精華影片),這樣就可以設定為自動播放或是做更多進階的控制;而較長、詳細的解說影片則可以放到 YouTube 等其他平台上,讓使用者想了解更多時再點擊播放,分散網站的流量。
這樣既可以達到吸睛效果,又不至於佔用太多網站的流量,還多一種曝光方式,可以說是一舉多得。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
感謝看到最後的你,若你覺得獲益良多,請不要吝嗇給我按個喜歡。❤️
如果你喜歡我的創作,還想看看其他有趣的分享與日常,
可以追蹤我的 IG @im1010ioio,或者是🧋送杯珍奶鼓勵我,謝謝你🥰。