How to remove white borders on my Bootstrap modal embedded video?
<p>Depending on what screen size the dimensions are set at, the borders of my YouTube video have this white outline on them. Sometimes they aren't there, but if I resize my window, then they appear. So it seems to depend on the dimensions of the screen.</p>

<p>Video demonstration: <a href="https://youtu.be/axAC8_LuJAA" rel="nofollow noreferrer">https://youtu.be/axAC8_LuJAA</a></p>

<p>And you can see for yourself at <a href="http://druvocals.com/xone" rel="nofollow noreferrer">http://druvocals.com/xone</a></p>

<p>My code for the modal is:</p>

<pre><code>&lt;!--modal of video--&gt;
    &lt;div class="modal video-modal fade" id="video-popup" tabindex="-1"&gt;
        &lt;div class="vertical-alignment-helper"&gt;
        &lt;div class="modal-dialog vertical-align-center"&gt;
            &lt;div class="modal-content"&gt;
                &lt;div class="modal-header"&gt;
                    &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true" class="fa fa-times"&gt;&lt;/span&gt;&lt;/button&gt;
                &lt;/div&gt;
                &lt;div class="modal-body"&gt;

                    &lt;div class="embed-responsive embed-responsive-16by9"&gt;
                        &lt;iframe id="vimeo-video" src="https://www.youtube.com/embed/dWWJHPXjOJk"&gt;&lt;/iframe&gt;
                    &lt;/div&gt;
                &lt;/div&gt;&lt;!--modal body--&gt;
            &lt;/div&gt;&lt;!--modal content--&gt;
        &lt;/div&gt;&lt;!--modal dialog--&gt;
        &lt;/div&gt;&lt;!--modal dialog--&gt;
    &lt;/div&gt;
    &lt;!--end the modal of video--&gt;
</code></pre>

<p>And my code for the trigger is:</p>

<pre><code>&lt;a href="#" class="btn btn-skin btn-lg" data-toggle="modal" data-target="#video-popup"&gt;Watch Video&lt;/a&gt;
</code></pre>

<p>My CSS code for the modal:</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>.modal {
  z-index: 1;
}

.modal-dialog {
  margin-top: 120px;
}

.modal-header, .modal-body {
  padding: 0px;
}

.modal {
  z-index: 99999;
}

.modal-header {
  min-height: 100%;
  border: 0px;
}
.modal-header .close {
  margin-top: -2px;
  position: absolute;
  top: -22px;
  right: 0px;
  opacity: 1;
  color: #aeaeae;
}
.modal-header .close:hover {
  color: #bfa67a;
}

.modal-content {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  border-radius: 0px;
}

/***self hosted video css***/
.video-section {
  width: 100%;
  height: 100%;
  position: relative;
  display: table;
  overflow: hidden;
}

.video-section .overlay {
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.video-section .fs-background-container {
  left: 0;
}

.video-section .video-overlay {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  z-index: 2;
}

.video-section .video-overlay h1 {
  font-weight: 700;
  color: #fff;
  font-size: 70px;
  line-height: 70px;
  margin-bottom: 0px;
  text-transform: capitalize;
}

.video-section .video-overlay p {
  color: #fff;
  margin-bottom: 25px;
  margin-top: 20px;
}
    .modal {
}
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
}

/* Width mobile layout */

@media only screen and (min-width:480px) and (max-width:767px) {
  .modal-content {
    margin: 25px 70px;
  }
}


@media only screen and (max-width:479px)  {
  .modal-content {
    width: 90%;
  }
}</code></pre>
</div>
</div>
</p>