首頁 部落格 將Youtube嵌入響應式網頁設計
Ryan
Jan 14, 2016
讓公司平均年齡上漲的宅男,經營過動漫社團、當過電玩雜誌特約作者。 興趣是電競與科技,關注新趨勢購物,尤其是冷門商品、或尚未上市的群眾募資商品。 網路行銷一做就是十幾年,認為這個業界需要更開放交流,才能成長與突破。

將Youtube嵌入響應式網頁設計



響應網頁設計(Responsive Web Design)已經是2015年網頁設計的主流,網頁設計師已經熟知如何駕馭響應式網頁設計的技巧,但網站的維護管理人呢?

網站的內容維護人員,不論我們稱他為版主或是小編,他們大多只有很基本的網頁後台管理的能力,不太會去動到網頁設計的部份,響應式網頁設計可以針對圖片跟文字進行最佳化的調整,但是對於第三方的嵌入服務就沒辦法作到響應式設計,換句話說:如果將影片直接放入響應式網站上,將會經常出現畫面過大或過小的問題。

這個問題該如何改善呢?這裡有一個非常實用的網站,可以幫助您解決將影片嵌入響應式網站的困擾:首先進入http://embedresponsively.com/ 之後,將Youtube的網址貼入後,就會出現一串語法,透過網頁編輯器的方式,將原始碼貼上後,該影片就能具有響應式的功能,隨著顯示裝置改變影片的解析度與大小。



除了全球最廣泛使用的Youtube外,還有很多知名的影音與圖片平台:Vimeo、谷歌地圖Google Maps、Instagram、Vine等,都能夠透過http://embedresponsively.com/ 的服務,變成響應式網頁的一部分,讓網頁顯示更為出色。

以下為詳細的操作方式

 

每個網站的後台的原始碼編輯功能按鍵可能位置都不盡相同,如果不確定,可以與你的網站服務公司詢問正確的位置為何。

 

手機端網頁設計與PC電腦端的差別與設計要點
手機端網頁設計與PC電腦端的差別與設計要點
Jericho
Jericho
Mar 23, 2021
手機網站設計應該注意什麽問題
手機網站設計應該注意什麽問題
Jericho
Jericho
Mar 15, 2021
【街頭攝影】如何拍出有故事性的「劇照」?
【街頭攝影】如何拍出有故事性的「劇照」?
Ringo
Ringo
Nov 02, 2017