有时网站后台发布转载文章,而文章中带有视频,这个视频通常是采用iframe方式嵌入的。如下代码:
<iframe src="https://www.xxx.com" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
如果在发布时清除了原来的格式,那么这个嵌入的视频也随之变得很小。
那么到底有没有比较简单快捷的方法,让iframe嵌入的视频宽度和高度,达到一个正常的,或适应当前页面宽度高度的方法呢?
答案是有的。
有人说手动去html里设置增加iframe标签的宽度和高度,但人是懒惰的,不想总是这样操作。
有人说可以用css来设置其宽度和高度为100%或其它数字,可是博主实践过,宽度是可以自适应,能看到变化,可是高度怎么设置也不会变,如果宽度是100%而高度没有变化,那么视频在页面中就被拉扯变形了,这不就是反向调整优化吗!
有人说用javascript来进行控制,但是为什么要把简单的事情复杂化呢?
重点来了,下面这个方法,只用几行css样式就能够实现自适应,我们先来看下css样式代码,复制下面的css样式,放到网站使用的样式表文件里。
.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”:
<p class="video"> <iframe src="https://www.xxx.com" frameborder="0" allowfullscreen="allowfullscreen"></iframe> </p>
刷新网站的样式文件及页面,发现变了!
视频嵌入已经实现了宽高自适应!!!
虽然这样每次发布带视频的内容时,还是需要去写个class=”video”,但比写死高度和宽度而造成响应式的网站,移动端视频就只能看到某一部分了要好很多。
成功实践后再回头看看起作用的css,那个padding-bottom为何是56.25%这个数字还是让小伙伴们懵圈,如果你把它去掉或改成其他数字,你会看到明显的高度变化。这是什么css计算原理在起作用呢?
十万个为什么?别问了,毕竟我也只是个小白,能解决问题就行!。
补充:如果内容页是全宽,如达到1920像素,那么视频的宽度也就随之变大,但视频实际尺寸只有1200像素,这明显超过视频原有尺寸,这时候画面就会变得失真模糊,那么这种情况下我们就要对video样式加以修改调整,具体调整如下:
.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。
本站部分文章搜集整理于互联网或者网友提供,如有侵权请联系站长
如若转载,请注明出处:https://www.htmlbk.com/web/3.html
温馨提示:该文档最后一次修改时间为2022-11-23 14:25:16,请注意相关的内容是否还可用!