title: How to remove black borders of youtube embed video from <iframe>?
body: <p>I tried making the youtube embed video's right and left black borders using <code>&lt;iframe/&gt;</code> to disappear but it still does not, and tried looping with <code>loop=1</code> and does not loop either. </p>
  
  <p>I wouldn't mind the video itself going off screen, preferably contained inside the screen without borders. I just want the visual itself to fully cover the screen and have the black borders on left and right to disappear, and also put it on loop as well.</p>
  
  <p><a href="https://i.stack.imgur.com/oguqF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oguqF.jpg" alt="enter image description here"></a></p>
  
  <p>What could I be doing wrong?</p>
  
  <p><strong>Here is the code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.nonClickingContainer {
    width: 100vw;
    height: 100vh;
    position: relative;
  }
  .catVideo {
    height: calc(100vh + 50px);
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div className="nonClickingContainer"&gt;
    &lt;iframe className="catVideo" width="100%" height="100%" src="https://www.youtube.com/embed/7WZPysRdP8A?autoplay=1&amp;autohide=0&amp;controls=0&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;disablekb=1&amp;loop=1" frameborder="0" scrolling="no" allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>