Wrap iFrame within Image

modified version of the following JS fiddle -- http://jsfiddle.net/Masau/7WRHM/

by gjpgjp

HTML

<div class="wrapper">
    <div class="h_iframe">
        <!-- a transparent image is preferable -->
        <img class="ratio" src="https://my.matterport.com/show/?m=jQptsFxRat8"/>
       <iframe frameborder='0' height='465px' width='470px' scrolling='no' src='https://my.matterport.com/show/?m=jQptsFxRat8' frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS

.wrapper         {width:100%;height:100%;margin:0 auto;background:#ffffff}
.h_iframe        {position:relative;}
.h_iframe .ratio {display:block;width:100%;height:auto;}
.h_iframe iframe {position:absolute;top:0;left:0;width:100%; height:100%;}