<form id="ivb0m"><span id="ivb0m"><track id="ivb0m"></track></span></form>

  • <nav id="ivb0m"></nav>

            iframe,object,embed标签嵌入视频后 宽高度自适应的css技巧

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

            <iframe src=”https://v.qq.com/iframe/player.html?vid=v06363imof8&amp;tiny=0&amp;auto=0″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

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

            iframe嵌入视频

            这么小,自然是观感不太好。有没有比较简单快捷的方法,让iframe嵌入的视频宽度和高度,达到一个正常的,或适应当前页面宽度高度的方法呢?

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

            二是可以用css来设置其宽度和高度为100%或其他数字,可是华哥实践过,宽度是可以自适应,能看到变化,可是高度怎么设置也不会变,如果宽度是100%而高度没有变化,那这个视频在页面中就被拉扯变形了。观感更糟!

            三是看到网上说用javascript来进行控制,只是看上去实现方式与代码都很复杂,没有勇气去尝试。

            四是下面这个方法。经过测试是可行的。

            把以下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“><iframe src=”https://v.qq.com/iframe/player.html?vid=v06363imof8&amp;tiny=0&amp;auto=0″ frameborder=”0allowfullscreen=”allowfullscreen“></iframe></p>

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

            视频嵌入宽高自适应

            实际效果可参见学而行营销网这篇:东方卫视「24节气」公益宣传片

            虽然发布带视频的内容时,还是需要去html代码中做一下手脚,写个class=xx,但比写死高度和宽度(网站是响应式的,那移动端如果固定的话,视频就只能看到某一部分了)要好很多。

            成功实践后再回头起作用的css,那个padding-bottom为何是56.25%这个数字还是让哥懵圈,如果你把它去掉或改成其他数字,你会看到明显的高度变化。这是什么css计算原理在起作用呢?

            让哥懵圈

            十万个为什么?别问了,能解决问题就行,一切都是拿来主义。


            2018.6.30日补充:如果内容页是全宽,如达到1200像素,那么视频的宽度也就随之变大,超过视频原有尺寸,这样放大的画面显示自然会变得失真模糊,因此要对视频上级html结构使用的css之video样式加以修改调整,如下:

            .video {
            position: relative;
            padding-bottom: 36.25%;
            height: 0;
            overflow: hidden;
            max-width: 640px;
            max-height: 360px;
            margin:0 auto;

            }

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

            实例演示地址:http://www.xueerxing.com/yingxiaoxue/zhenghe/8589.html

            本文链接:肖运华 » 网站策划设计制作优化 » iframe,object,embed标签嵌入视频后 宽高度自适应的css技巧
            转载请注明:http://www.gipsh.com/2344.html

            发表评论

            电子邮件地址不会被公开。

            极速赛车10选1稳_Welcome