如何在網頁裡面嵌入YouTube影片,並在各種行動裝置上面,完美呈現

圖文作者: Mike Lin (林宜正)
發表日期: 2018/03/29 20:17     最近編輯: 2018/04/01 03:13     閱覽次數: 496


圖1. 如何在網頁裡面嵌入YouTube影片,並在各種行動裝置上面,完美呈現
圖1. 如何在網頁裡面嵌入YouTube影片,並在各種行動裝置上面,完美呈現

大家經常想要在部落格裡面加入YouTube影片,但由於YouTube所提供的<iframe>嵌入方式,是以固定的長寬來呈現,例如:

<iframe width="800" height="600" src="https://youtu.be/" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

長800px,高600px,在桌上型電腦或筆電上面,看起來還可以,但在手機上面看,往往就跑到螢幕的外面去了,把整個網頁編排都搞亂。如果能夠將影片的長寬,以100%來呈現,隨著不同裝置的不同螢幕寬度,而能夠自動調整,那就是太好了。

解決的方式,是把YouTube提供的程式碼,包在<div></div>裡面,只要把<div>的長寬設定為100%,把影片的寬度設為螢幕本身的寬度,這樣影片就不會跑到螢幕外面去。

在CSS檔案裡面,加入

.youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.youtube iframe, .youtube object, .youtube embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

CSS設定適合各種影片嵌入方式:<iframe>或<object>或<embed>。然後把YouTube提供的程式碼包到<div class="youtube"></div>裡面

<div class="youtube"><iframe width="800" height="600" src="https://youtu.be/" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>

再把上面這段程式碼,加到文章裡面,這樣就可以完美呈現而不會破壞版面美觀了。

下面就是一個實例,利用<div>把<iframe>包起來之後,影片就可以完美在手機上面呈現,而不會跑到螢幕外面去。







*請記住,每個人的健康是不同的,對於任何食物的好處,每個人所表現出來的反應可能不一樣。此網站所提供的資訊不應被用來作為或替代醫療診斷,僅分享以提供有關可能有助健康的好處,且不附帶任何保證。充足的資訊能幫助您做出最好的選擇。請朋友們多方考證,再根據自己的判斷加以取捨。請搜尋參考更多關於<熙熙健康生活>

丞燕產品服務站
丞燕產品服務站 (貨到付款 一律免運費)









圖/文 版權所有 © 2018 Mike Lin (林宜正)

聲明: 使用本網站的同時,表示您已同意本網站所揭露之各項服務條款與政策,如果有任何疑問,請<與我聯絡>

Local time: Wednesday, November 14, 2018, 3:51 pm       Your IP Address is: 54.159.44.54