学做网站培训课程介绍

当前位置:

怎么让网站上视频以16:9比例自适应缩放显示

问:老师,我做了一个视频类的网站,是一个自适应的网站,网站上有很多视频,但是视频的尺寸我控制不好,特别是高度,我是在PC端设置高度为480,手机端设置为280,但总是视频四边出现了黑边,有没有方法让视频能自动按它比例缩放呢?

答:视频是可以按比例缩放显示的,现在大部分视频的宽度与高度比例是16:9,我们可以通过学习CSS教程将视频按照这个比例进行缩放显示。
我们可以将视频放在一个父DIV里,然后设置父DIV的尺寸为16:9的比例,然后再设置video标签宽度都是100%就可以了。具体写法如下:
我们通过百分比设置宽度,根据宽度的比例数值*9/16,计算出高度的百分比数值,设置内边距为高度的数值,最后用绝对定位把视频百分百填充到我们设置的区域里面


<div class="video_wap">
<video src=""></video>
</div>

CSS样式控制:


.video_wap{
padding-bottom: 56%;
width: 100%;
position: relative;
}

.video_wap video{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

这样不管你是PC还是手机端,网站上的视频都会一直以16:9的比例缩放显示了,不会再出现你说的那些问题了。同样这个方法也可以适用图片的缩放显示。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 网页如何添加视频动画 视频教程 (1107348 次浏览)
    在网站制作过程中,特别是学习视频网站制作教程时,是需要给网站中添加很多的视频的,对于网站如何添加视频有二种方法:一种是添加自己网站的视频,另
  • 通常我们要在自己做的网站上放视频方法就是将自己的视频先上传到优酷,土豆等一些大的视频网站,然后再将优酷,土豆上的视频通过分享代码嵌入自己的网
  • 如何一次性去除课程中优酷广告1、下载“净网大师”软件(免费),网盘下载地址:https://pan.baidu.com/s/1b3LKa62、安装并运行软件(安装方法
  • 什么是自适应手机网站 视频教程 (1103504 次浏览)
    以下为学做网站论坛关于“什么是自适应手机网站”讲解视频教程。
  • 老师你好,我前几天一直在学习手机站课程,对于课程中的案例网站特别喜欢,自己就跟着课程一步步做了一遍。也做了课程笔记,感觉学到了很多知识。
  • 什么是自适应网页由于智能手机的普通,上网的终端设备已不局限于PC电脑了,有手机,平板,笔记本等等。宽度通常在600像素以下;PC的屏幕宽度,一
  • 问:老师,我做了一个视频类的网站,是一个自适应的网站,网站上有很多视频,但是视频的尺寸我控制不好,特别是高度,我是在PC端设置高度为480,