使用CSS实现弹性视频html5案例实践

在构建Elemin Theme响应式站点的过程中，我面临了一个挑战：如何使嵌入的视频在尺寸变化时更加灵活。对于html5的video标签，通过设置max-width:100%和height:auto可以很好地解决这一问题，但这一方案并不适用于iframe和object标签嵌入的视频。经过数小时的研究与试验，我最终找到了一个解决方案，这一CSS技巧在响应式设计中非常实用。

灵活的html5 video标签

对于html5的video标签，我们可以通过设置max-width:100%来增强其灵活性。如前所述，这种方法并不适用于包含iframe和object的内嵌代码。

灵活的Object & Iframe 内嵌视频

对于内嵌的iframe和object标签，可以采用以下技巧：为video添加一个div容器，将div的padding-bottom属性值设置为50%到60%之间，然后设置子元素（iframe或object）的width和height为100%，并使用绝对定位。这样，内嵌对象会自动扩展到最大。

CSS样式

以下是具体的CSS代码示例：

```css

.video-container {

position: relative;

padding-bottom: 56.25%; / 这个值是为了适应16:9的视频比例 /

padding-top: 30px;

height: 0;

overflow: hidden;

}

.video-container iframe, .video-container object, .video-container embed {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

```

HTML结构

以下是HTML代码示例：

```html

```

在固定宽度下实现灵活性

如果视频的宽度受到限制，我们可以使用一个额外的div容器来包裹video，为这个div设置固定宽度和max-width:100%。这样，即使在固定宽度下，视频也可以保持其灵活性。

兼容性

这个技巧在所有主流浏览器中都能良好运行，包括Chrome、Safari、Firefox、Internet Explorer、Opera以及iOS设备（如iPhone和iPad）。