[語法] 適用 YouTube/Vimeo/Instagram 嵌入網頁自動調整大小程式碼產生器

想要將 YouTube 影音平台給崁入網站,可以使用官方提供 HTML 語法來使用,能夠依據版面固定寬高度,但最常會遇到的是電腦顯示正常,切換至手機行動裝置,影音區塊版面比例就變得很奇怪,不知道該如何解決??推薦造訪 Embed Responsively 崁入影音網站自動調整大小產生器,支援常見:YouTube、Vimeo、Dailymotion、Google Maps、Instagram、Vine、Twitter … 等平台,讓你用電腦/手機與平板裝置都能自動適應網頁大小來顯示,非常適合有經營網站朋友來使用。



資訊名稱:Embed Responsively

網站連結:http://embedresponsively.com

適用平台:YouTube、Vimeo、Dailymotion、Google Maps、Instagram、Vine、Twitter

 

影音平台 Resize 自動縮放大小教學:

 

 

造訪 Embed Responsively 網站,可依據影音平台不同,勾選來源後在方寬貼入連結,然後再點擊 Embed 即可於下方產生程式碼。

 

 

上圖左是正常固定寬高代碼,切換至手機版比例就變得很奇怪,右圖使用 Embed Responsively 則是自動縮放尺寸顯示。

 

 

原始影片如上↑

 

 

採用 Embed Responsively 自動縮放影片大小語法效果↑

 

電腦前的你可以使用手機開啟,便可看出效果的差異性,至於此語法是採用 CSS 樣式,因此也不用擔心網站掛掉,就整個無法顯示的情況,可以好好的安心使用。

 

臉書留言

一般留言