title: disabling blackbars on youtube embed iFrame
body: <p>I embed a video from youtube to my web page I want it to be stretch 100% on the screen with no blackbars. Although I give it a width of 100%, it still has some blackbars on the sides of the video. How can I get rid of it?</p>
  
  <p>Screenshot:<a href="https://i.stack.imgur.com/ERBtr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ERBtr.png" alt="Screenshot"></a> 
  snippet: <a href="https://jsfiddle.net/o3rp6an9/1/" rel="noreferrer">https://jsfiddle.net/o3rp6an9/1/</a></p>
  
  <pre><code>&lt;div id="video"&gt;
      &lt;iframe width="100%" height="100%" src="https://www.youtube.com/embed/zWAiQJvwb8Q?autoplay=1&amp;loop=1&amp;controls=0&amp;rel=0&amp;showinfo=0&amp;playlist=zWAiQJvwb8Q&amp;modestbranding=1" frameborder="0" allowfullscreen="allowfullscreen"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  
  #video {
      height:100%;
      width:100% !important;
      background-size:100% 100%;
      position:relative;
      overflow:hidden;
  }
  </code></pre>
  
  <p>There's another question about this but it basically didn't help me.</p>