如何让iframe,object,embed标签完美自适应视频宽度高度? 不指定

郝聪 , 2022/05/19 18:30 , DIV+CSS , 评论(0) , 阅读(181) , Via 考高分网 | |


更多



有时网站后台发布转载文章,而文章中带有视频,这个视频通常是采用iframe方式嵌入的。如下代码:

XML/HTML代码
        
  1. <iframe src="https://www.xxx.com" frameborder="0″allowfullscreen="allowfullscreen"></iframe>  

如果在发布时清除了原来的格式,那么这个嵌入的视频也随之变得很小。

那么到底有没有比较简单快捷的方法,让iframe嵌入的视频宽度和高度,达到一个正常的,或适应当前页面宽度高度的方法呢?

答案是有的。

有人说手动去html里设置增加iframe标签的宽度和高度,但人是懒惰的,不想总是这样操作。

有人说可以用css来设置其宽度和高度为100%或其它数字,可是刘小白实践过,宽度是可以自适应,能看到变化,可是高度怎么设置也不会变,如果宽度是100%而高度没有变化,那么视频在页面中就被拉扯变形了,这不就是反向调整优化吗!

有人说用javascript来进行控制,但是为什么要把简单的事情复杂化呢?

重点来了,下面这个方法,只用几行css样式就能够实现自适应,我们先来看下css样式代码,复制下面的css样式,放到网站使用的样式表文件里。

XML/HTML代码
        
  1. .video {  position: relative;  padding-bottom: 56.25%;  height: 0;  overflow: hidden;}.video iframe,.video object,.video embed {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;}  

然后我们在发布文章时,切换至html源代码模式,在视频标签,iframe,或object,或embed的上级html标签中(对比上面的css文件层级),加入class=”video”即可。

例如下面示例代码,上级标签是<p>,那么就在<p>标签里加入class=”video”:

XML/HTML代码
        
  1. <p class="video">  <iframe src="https://www.xxx.com″ frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>  

刷新网站的样式文件及页面,发现变了!

视频嵌入已经实现了宽高自适应!!!

虽然这样每次发布带视频的内容时,还是需要去写个class=”video”,但比写死高度和宽度而造成响应式的网站,移动端视频就只能看到某一部分了要好很多。

成功实践后再回头看看起作用的css,那个padding-bottom为何是56.25%这个数字还是让小伙伴们懵圈,如果你把它去掉或改成其他数字,你会看到明显的高度变化。

补充:如果内容页是全宽,如达到1920像素,那么视频的宽度也就随之变大,但视频实际尺寸只有1200像素,这明显超过视频原有尺寸,这时候画面就会变得失真模糊,那么这种情况下我们就要对video样式加以修改调整,具体调整如下:

XML/HTML代码
        
  1. .video {  position: relative;  padding-bottom: 36.25%;  height: 0;  overflow: hidden;  max-width: 640px;  max-height: 360px;  margin: 0 auto;}  

对比之前的样式,这里修改padding-bottom为36.25%,margin:0 auto则是让视频的位置居中对齐,同时新增加max-width值为640px,max-height的值为360px。

发表评论

昵称

网址

电邮

打开HTML 打开UBB 打开表情 隐藏 记住我 [登入] [注册]