大家經常想要在部落格裡面加入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>包起來之後,影片就可以完美在手機上面呈現,而不會跑到螢幕外面去。