Question

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

图形问题：

我希望弹出窗口位于所有此类设备的视频播放器内部。

以下是我想要做的事情：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 -->

这是我到目前为止拥有的

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; bottom: 0; left: 0; right: 0;。这是此插件的预期行为。

此外，此插件的工作方式是将模式内容克隆到其自己的div，然后显示它。因此，您可以少控制它的位置。

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

弹出视频容器流出

1 个答案: