title: How to make an iframe responsive full height and full width
body: <p>I'm embedding a youtube/dailymotion videos and I want to make the iframe responsive and especially full height , the same height as the window :</p>
  
  <p>I made a responsive Iframe but not full height !</p>
  
  <p>Here is my code</p>
  
  <pre><code>   &lt;div  class="video-container"&gt;
                         &lt;iframe height="100%" width="100%"  src="https://www.youtube.com/embed/7ipiybRLqZc" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt; 
                  &lt;/div&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>.video-container {
      position: relative;
      padding-bottom: 100%;
      height:100%;
  
  }
  
  .video-container iframe, .video-container object, .video-container embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      margin:0px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/2rg09xsg/" rel="nofollow">DEMO + CODE JS FIDDLE</a></p>