Bootstrapモードの埋め込みビデオで白い枠線を削除するには？

Question

サイズが設定されている画面のサイズに応じて、YouTube動画の境界線には白い輪郭が表示されます。時々彼らはそこにはいませんが、私が窓の大きさを変えれば、彼らは現れます。だからそれは画面の大きさに依存するようです。

ビデオデモ：https://youtu.be/axAC8_LuJAA

そして、あなたはモーダルのための私のコードがあるhttp://druvocals.com/xone

で自分で見ることができます。

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

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

とトリガーのための私のコードは次のとおりです。

<a href="#" class="btn btn-skin btn-lg" data-toggle="modal" data-target="#video-popup">Watch Video</a> 

モーダル用の私のCSSコード：

.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%; 
 
    } 
 
}

Answer 1

男、私もその氏マルティネス汗ません。