html 响应式视频/ iframe

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 响应式视频/ iframe相关的知识,希望对你有一定的参考价值。

<!--THE EFFECTIVE WAY IS ON THE BOTTOM-->
<div class="container">
<figure><img src="<?php bloginfo('template_url'); ?>/images/mid_img1.jpg" alt="dummy youtube video with company logo"></figure>
<iframe src="https://player.vimeo.com/video/279335650" allowfullscreen></iframe>
</div>

<!--The height will depends on the image that why it will be responsive;-->
<style>
.middle_con1 .container iframe{width: 100%;height: 100%;top:0;left:0;position: absolute;z-index: 1;}
.middle_con1 .container figure{position: relative;z-index: 0;}
.middle_con1 .container{width:100%;height:auto;position: relative;}
</style>
<!--THE EFFECTIVE WAY IS ON THE BOTTOM-->


<!--EFFECTIVE METHOD UPDATED-->
<style>
padding-top: calc(233.9 / 333.9 * 100%); /*/put this on to parent div*/
make the video absolute with width 100% and height 100%;top:0 left:0
</style>

以上是关于html 响应式视频/ iframe的主要内容,如果未能解决你的问题,请参考以下文章

为响应式设计缩放 iframe 仅 CSS

css 响应式修复iframe视频

css 响应式视频iframe

仅使用 CSS 的响应式视频 iframe(保持纵横比)?

WordPress 中的响应式 iframe

css 使用iFrame的响应式YouTube和Vimeo视频 - 来自https://www.ostraining.com/blog/coding/responsive-videos/