在响应式网站中，对视频的处理也是最常见的功能需求，如同响应式图片一样，响应式视频的处理也是比较让人头疼的事情。这不仅仅是关于视频播放器的尺寸问题，同样也包含了视频播放器的整体效果和体验问题。

本例巧用标记，实现一个视频在手机端的正常显示与播放。首先使用<iframe>标记引入视频，然后通过<meta>标记，添加viewport属性，最后设置属性值为width=device-width,initial-scale=1，规定布局视口宽度等于设备宽度，页面的缩放比例为1。

使用iframe标签播放视频

课后整理 2020-12-20

【示例】

HTML

<!DOCTYPE html>
<html>
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--通过meta元标签，使网页宽度与设备宽度一致 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--指定页头信息-->
<title></title>
</head>
<body>
<div align="center"> 
    <!--使用iframe标签，引入视频-->
    <iframe  src="../../html5_media/media/1.mp4" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>

CSS
```
无
    					
```

下载源代码