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

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

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

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

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

在CSS檔案裡面，加入

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

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

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