有时网站后台发布转载文章,而文章中带有视频,这个视频通常是采用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。

THE END

非特殊说明,本博所有文章均为博主原创

如若转载,请注明出处:https://www.htmlbk.com/web/3.html