title: Making iframe responsive with media query
body: <p>I am working on a project to display both html5 and Iframes in the same div container. The intended use of this code is to display autoplay video on our home page both for mobile and desktop versions. The block is smaller that 375px on desktop and due to mobile restrictions we cannot display html5 autoplay video so we will will include a iframe with a video link, the mobile block is  greater than 375px</p>
  
  <p>I have got the media queries to work in my test but i cannot figure out how to make my iframe position responsive with the position relative and absolute method    </p>
  
  <pre><code>&lt;style&gt;
  @media only screen and (min-width: 375px) {
  #iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }
  #iframe {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
   }
  #video {
  display: none;
  }}
  @media only screen and (max-width: 375px) {
  #video {
   display: block;  
   }
  #iframe {
   display: none;
   }
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>HTML:     </p>
  
  <pre><code>&lt;div class="item white"&gt;
  &lt;div id="iframe"&gt;
  &lt;iframe  src="https://player.vimeo.com/video/279740359" 
   width="320" height="240" frameborder="0" allowfullscreen="" &gt;Browser 
   not compatible.
  &lt;/iframe&gt;
  &lt;/div&gt;
  &lt;div id="video"&gt; 
  &lt;a href="https://www.shopbentley.com/en/back-to-school.html"&gt; 
  &lt;video  width="100%" height="100%" loop autoplay muted 
   preload="metadata"&gt;&lt;source 
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" type="video/mp4" /&gt;      
   Your browser does not support the video tag. I suggest you upgrade 
   your browser.
  &lt;/video&gt; 
  &lt;/a&gt; 
  </code></pre>
  
  <p>link to the working code <a href="http://jsfiddle.net/fe3vd2ts/12/" rel="nofollow noreferrer">http://jsfiddle.net/fe3vd2ts/12/</a></p>