响应式 - 使视频自适应于屏幕宽度

简介: 响应式 - 使视频自适应于屏幕宽度

前言

流媒体视频同样可以为响应式的。在HTML5页面中嵌入响应式视频是一件非常简单的事情。如video标签支持百分比的宽度设置,但是问题在于,该方案需要网站主机拥有对应的视频源。如果已经有视频源,那么一切都易如反掌。



image.png


不过,使用视频托管网站(如YouTube或Vimeo)比自己托管更具优势。首先,自己的托管服务器可能会受到带宽或磁盘空间的限制。其次,相比于使用自己的托管服务器,使用视频托管网站上传可用的Web视频的整个过程更加便捷。


准备工作

视频托管网站允许你在自己的页面中嵌入iFrame或object代码片段,用以在你自己的网站中展示视频。但是iFrame或目标代码段不能用在video标签中。因此,为了实现响应式视频功能,所用的方法相对复杂一些,但是仍然不太困难。


实现方式

在HTML中将视频源代码段嵌入div元素中,同时设置div元素为相对定位,其底部内边距设定为50%~60%。然后设定子元素,即视频iFrame对象为绝对定位,宽度为100%,高度为100%。这使得iFrame对象完全填充了父元素。

以下HTML代码展示如何通过iFrame标签从Vimeo获取视频信息:


image.png


下面的HTML代码展示如何使用老版本的YouTube标记对象:


image.png


以上两段HTML代码均依赖于以下CSS配置:


image.png


如果不希望视频占据整个页面的宽度,可以使用width及max-width属性来限制视频宽度。接着使用另外一个div元素包装在class属性为video-wrap的元素的外层,并且设定width属性为固定值,属性max-width的值为100%。



image.png


工作原理

该方法称为固有比率视频法(Intrinsic Ratiosfor Videos),由Thierry Koblentz在网站A ListApart上提出。在元素中所嵌入的视频具有固有的长宽比,并且被赋予了一个绝对位置。这就使得允许视频窗口大小改变的同时,锁定视频长宽比。


目录
相关文章
|
2月前
|
编解码
element-ui 表格滚动条(不同分辨率)自适应问题;
element-ui 表格滚动条(不同分辨率)自适应问题;
53 1
|
9月前
响应式布局的五种方法
响应式布局是同一页面在不同的屏幕上有不同的布局,即只需要一套代码使页面适应不同的屏幕。
|
9月前
|
小程序 JavaScript
微信小程序 - image 宽高自适应(图片无法自适应撑开标签)
微信小程序 - image 宽高自适应(图片无法自适应撑开标签)
428 0
|
9月前
|
前端开发 容器
CSS不同手机型号各种尺寸设备宽高比
CSS不同手机型号各种尺寸设备宽高比
|
12月前
|
JavaScript API 容器
IntersectionObserver实现横竖滚动自适应懒加载
ntersectionObserver实现横竖滚动自适应懒加载 这几天使用vitepress编写个人网站的时候,编写了一个存放图片的组件,理所当然的,这个组件应该实现图片懒加载,并且由于这个组件存放的图片可以是非常多的,所以实现懒加载就显得极为重要了,但是由于我实现这个组件的方式有点特别,是用盒子的背景图来存放图片的,并且支持横向滚动,所以大致搜索了下了解到了IntersectionObserver这个api非常适合我用来实现这个功能(缺点就是兼容性可能差点);
98 0
IntersectionObserver实现横竖滚动自适应懒加载
|
编解码
响应式和自适应布局
响应式和自适应布局
243 0
|
前端开发
响应式 - 基于尺寸的响应式内边距
响应式 - 基于尺寸的响应式内边距
84 0
响应式 - 基于尺寸的响应式内边距
响应式 - 创建自适应的响应式字体
响应式 - 创建自适应的响应式字体
80 0
响应式 - 创建自适应的响应式字体
|
前端开发
响应式 - 基于宽度百分比的图像缩放
响应式 - 基于宽度百分比的图像缩放
116 0
响应式 - 基于宽度百分比的图像缩放
|
编解码 前端开发 JavaScript
响应式布局的五种实现方法
响应式布局的五种实现方法
432 0
响应式布局的五种实现方法