javascript - 弹出视频容器流出

Question

我有简单的 HTML 5 视频播放器，我有一个在当前时间为 0:07 时打开弹出窗口的功能，不幸的是，小型设备上的弹出窗口流出 div。

图形问题:

我希望弹出窗口在所有此类设备的视频播放器内居中。

这是我正在尝试做的事情的 Plunker:HTML 5 Video Player

这是 HTML

<div class="video-container">
        <div class="box1"></div>
        <div class="box2"></div>
        <video id="video1" class="video-js vjs-default-skin" controls autoplay="true">
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            Your browser does not support the video tag.

        </video>
        <div class="lightbox popUpQuestion1">
            <div class="row row-no-padding">
                <div class="product-left-col">
                    <div class="product-main-pic">
                        <div id="imgContent">
                            <!-- Sinon si pas de coloris et pas de default Sku
                                        -> Affiche le premier SKU. -->
                            <img id="popinMainPic" src="http://www.sephora.pl/media/catalog_ProductCatalog/m11470681_P2264_princ_medium.jpg">
                        </div>
                    </div>
                </div>
                <div class="product-right-col">
                    <div class="prodcut-title">
                        <H1>Rose Deep Hydration Moisturizer</h1>
                    </div>
                    <div class="description-text">
                        An ultra-hydrating gel cream powered
                        by hyaluronic acid and time-release
                        technology for petal-soft skin.
                    </div>
                    <div class="product-price">
                        <span>299,00 zł</span>
                    </div>
                    <a target="_blank" href="http://www.sephora.pl/Makijaz/Oczy/Kredki-do-oczu-i-khol/Mini-kredka-do-powiek/P2255003?skuId=315720">
                        <div class="buy-button animates-in show">KUP TERAZ </div>
                    </a>
                </div>
            </div>

        </div>
    </div> <!-- End of Container -->

这是我到目前为止的 CSS

body{
    background-color: #f0f0f0;
    overflow-x: hidden;
    margin: 0em 0em;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

h1, h2, h3, h4, h5, h6{
    margin: 0;
    font-weight: bold;
}

p{
    margin: 0;
}
a{
    text-decoration: none;
}

video{
    width: 1266px;
    height: 100%;
    left: 0px;
    top: 0px;
    margin-left: 0px;
    margin-top: 0px;
}

img{
    float: left;
    margin-right: 25px;
}

.container{
    width: 100%;
    margin: 0px auto;
    overflow: hidden;
    margin-top: 50px;
}

.descArea{
    background-color: #fff;
    box-shadow: 0 0 3px #c8c8c8;
    padding: 15px;
    box-sizing: border-box;
}

/* .videoArea{
    position: relative;
} */
.video-container{
    position: relative;
    height: 100%;
    width: 100%;
    background-color: #000;
    margin:0 auto;
}

.box1{
    position: absolute;
    background-color: rgba(40, 169, 220, 0);
    width: 200px;
    height: 200px;
    top: 50px;
    left: 630px;
    cursor: pointer;
}

.box2{
    position: absolute;
    background-color: rgba(207, 50, 53, 0);
    width: 200px;
    height: 200px;
    top: 70px;
    left: 150px;
    cursor: pointer;
}

.lightbox{
    display: none;
}

.longBtns{
    display: block;
}
.buy-button {
    background-color: #555;
    color: #fff;
    font-size: 2em;
    cursor: pointer;
    width: 182px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    /* right: 10px; */
    /* bottom: 41px; */
}
.product-modal{
    background-color: #f5f5f5;
    font-size: 1.2em;
    width: 65em;
    height: 46.3em;
}
.row-no-padding{
    display: flex;
}

.sku-label-brand{
    font-family: georgia;
    letter-spacing: .2em;
}
.description-text {
    margin-top: 1%;
    line-height: 1.4;
    /* font-size: 1.7em; */
    /* width: 50%; */
    font-size: 24.444px;
    font-family: "Century Gothic";
    color: rgb(0, 0, 0);
    line-height: 1.2;
    text-align: left;
    margin-bottom: 60px;
}
.product-right-col{
    width: 60%;
}
.product-left-col{
    width: 50%;
    margin-right: 45px;
}
#popinMainPic{
    width: 100%;
    height: 100%;
}
.sku-link{
    margin-bottom: 20px;
}
.product-price{
    margin-bottom: 20px;
    font-size: 36px;
    font-family: "Century Gothic";
    color: rgb(0, 0, 0);
    font-weight: bold;
    line-height: 1.2;
    text-align: left;
}
.prodcut-title > h1{
    font-size: 30.556px;
    font-family: "Century Gothic";
    color: rgb(0, 0, 0);
    font-weight: bold;
    line-height: 1.2;
    text-align: left;
    margin-bottom: 14px
}

.vjs-marker{
    width: 6px !important;
    border-radius: 30%;
    background-color: white !important;
    margin-left: -3.5px;
    left: 29.2002%;
    height: 6px !important;
    border-radius: 100px !important;
    bottom: 11px;
    -webkit-border-radius: 100px !important;
    -moz-border-radius: 100px !important;
    -ms-border-radius: 100px !important;
    -o-border-radius: 100px !important;
}

.video-js .vjs-big-play-button {
    display: none !important;
}
.vjs-has-started .vjs-control-bar {

    background: linear-gradient(to bottom,rgba(0,0,0,.1) 0,rgba(0,0,0,.69) 99%,rgba(0,0,0,.7) 100%);
}

.video-js{
    width: 100% !important;
}

.video1-dimensions {
height: 100% !important;
width: 100% !important;
}

.featherlight .featherlight-content{
    transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    -o-transform: scale(0.7);
}

我已经尝试将 overflow:hidden 添加到父 div 仍然相同。

我的代码有什么问题？任何想法或帮助将不胜感激。

Answer 1

featherlight 基本上为您提供了一个窗口大小的弹出窗口，它具有 position: fixed 并且设置为水平和垂直放置在中心。如果你查看 featherlight 的 CSS，你会发现它有 top: 0;底部:0；左:0；右:0；。这是此插件的预期行为。

此外，这个插件的工作方式是将模态内容克隆到它自己的 div 中，然后显示它。因此，您可以稍微控制其定位。

要覆盖此行为，您需要手动计算视频的顶部、左侧和高度，然后通过 javascript 将其应用于 .featherlight。这将强制 featherlight 模态仅在视频上显示，而不管设备的宽度/高度如何。
希望这会有所帮助。