hefhuman
2/19/2019 - 5:28 AM

Responsive Video/iframe

add image to relative parent with the size of your desire;position the image with relative with z-index of 0 and width:100%;heightauto; ;then your iframe with position absolute;with top:0;left:0;z-index:1;width:100%;height:100%;

responsive-video-iframe.html
content_copyfile_download
<!--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>