Question

根据尺寸设置的屏幕尺寸，我的YouTube视频的边框上会显示此白色轮廓。有时它们不存在，但如果我调整窗口大小，它们就会出现。所以它似乎取决于屏幕的尺寸。

看到自己

我的模态代码是：

<!--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

伙计，马丁内斯先生，我甚至都不会出汗。

如何删除我的Bootstrap模态嵌入式视频上的白色边框？

1 个答案: