CTK pro

關於 CTK PRO:於2011年夏天展開了偉大的航程,初期以開發手機APP為主,2013年開始跨入Web開發,2015年開始用UCD(User-Centered Design)方法協助客戶釐清需求, 2016年大量採用AWS架構, 並導入策略UX產品為客戶在軟體開發各環節破關!

back to top

在RWD網頁中,嵌入響應式的Youtube影片

手機裡觀看含有影片的網頁...

網路速度建置完成後,影音串流席捲了內容市場,2017年Facebook說是直播元年,從2015年起,最大影音串流平台Youtube每天的使用者和停留時間不斷上升,2017年數據顯示,台灣的使用者每週觀看Youtube時間接近15個小時,也就是一天有兩個小時花在Youtube上瀏覽內容。

越來越多企業也將自己的形象影片、活動影片丟上官網,一方面增加使用者停留時間,一方面嵌入網頁的方式也可以為網站導入流量。只是隨意嵌入的影片是否有符合網站RWD的設計,有可能對使用者體驗帶來負面影響,我們來看看如果只是將Youtube內「嵌入」網頁會發生什麼事?

兩種解決影片在RWD裡的方案

在 Youtube 播放窗口底下分享的選項中,有很多選擇,直接分享到 Facebook、Email、嵌入等,但因為 Youtube 嵌入設定的 iframe 寬固定在 560,縮小在手機顯示上會有問題,很多新聞網頁,企圖嵌入影片時造成版位錯亂,讓使用者得到很差的體驗(像是找不到全螢幕播放按鈕,無法調整聲音大小,影片和討厭的蓋版廣告交互作用……)。我們可以考慮兩種解決方法:

一、Wordpress 解決方案:

1.  找一個好的佈景主題。最簡單明瞭的就是找到連影片都幫你想好的佈景主題了,但就視覺上,文章中穿插滿版的影片播放有時候還是會顯得突兀,這時就就要用方案 2 來解決了!

2. 安裝 WordPress 外掛。WordPress 外掛千百種,你碰到的問題都會有人先想好解決方法了,推薦使用 Youtube(之前似乎叫做Youtube Embed Plugin),有超過20萬個網站都啟用,功能相當完整,不只是 RWD,像是要調整不要 show 出推薦影片、是否允許全螢幕播放、版面位置都可以很輕鬆地用勾選的方式來完成。

二、用 CSS 搞定:

適用有一點 CSS/Html5 基礎的人(其實也不難學)。

將下面的 CSS 加到 Style 裡面

.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.djsp{ display: none; }
.videoWrapper iframe {
position: absolute;
top: 0;
}

更進一步我們還可以在前面加上一段:

@media only screen and (max-width: 768px)

那麼在大螢幕顯示時,就不會是一個巨大的滿版(這樣有時候看起來很有壓迫感啊)。之後在 Youtube 嵌入碼前後包一個div標籤,把 class 定義成 videoWrapper 即可,範例(記得把 !– 去掉):

<!--div class="videoWrapper">

<!--iframe width="300" height="150"> <!--iframe><!--div>

響應式網頁細節比你想的還要多

用了以上的方法,其實只要將各式影片、圖片包進 videoWrapper 裡面,都變得比較容易適應網頁的設計了。但這樣的設計就能夠滿足每個公司網頁的設計初衷,就要每個網站的屬性而定了,若你是新聞訊息發佈,影音新知教學類的網頁,有將影片融入(當然更好的作法就是在網頁設計之初就考量周全)RWD的思維裡,就顯得分外重要。

最後,就偷渡一個用這個方式包起來的影片,欣賞一下 CTK Pro 的影片吧 ♞

表格的 RWD 怎麼調 ☛ 看這裡

Aron Lai

數位行銷工具應用者。從企劃、文案、社群、網路行銷工具無所不包。 希望大腦可以和網路資料庫連結,緩解資訊焦慮症狀。

Follow: