<!--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>