CSS3是現(xiàn)在前端開發(fā)重要的一部分，它可以實現(xiàn)一些在以前需要使用JavaScript才能完成的效果。其中，插入視頻就是CSS3最常用的一個特性之一。

.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

上面的代碼可以在一個container中插入一個iframe視頻，且能夠自適應(yīng)。其中，padding-bottom撐開容器高度，使得容器可以依據(jù)比例來撐開高度。容器的高度設(shè)置為0，這個策略有一個好處，當父元素的高度為0時，其子元素即使設(shè)置了高度，也不會撐開父元素。

接下來，使用以下代碼來插入視頻：

上面的代碼可以更加精準地，在container中插入視頻。通過將iframe放在padding-bottom的div中，達到容器與iframe大小相等，作為視頻的容器。

在使用iframe和video標簽插入視頻的時候，要注意：

• IE瀏覽器不支持HTML5的video標簽，需要使用Flash進行播放，而不是自動彈出下載提示。
• 通過iframe插入視頻時，需要各種瀏覽器的支持。特別在IOS平臺上，需要考慮豎屏播放的尺寸情況。