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

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

使用iframe标签播放视频

课后整理 2020-12-20

【示例】