Question

我的网站上有一个主视频，调整大小后显示绿色背景。我认为问题与视频的长宽比有关，但我的问题是，能否使我的视频高度响应整个视频容器的位置？

以下是调整大小后的视频截图

如您所见，调整大小时，我想删除顶部和底部的多余边距。背景变成绿色，因为我有引导程序成功的背景

bg-success

而且我还尝试将视频设置为响应项，但这没有用，因为它使视频占据了整个浏览器的高度，甚至更多。

embed-responsive-item

这是我的代码和Codepen https://codepen.io/anon/pen/LBREqe

HTML

<main class="d-flex w-100 h-100vh">
    <aside class="sidebar">
        <div class="col h-100vh d-flex flex-column justify-content-between">
            <div>
                <h1>Title</h1>
                <hr />
            </div>
            <footer>
                <p class="text-center">
                    <a href="index.html">Home</a>

                </p>
            </footer>
        </div>
    </aside>
    <section class="workspace bg-success flex-fill">
        <div class="video-container h-100vh d-flex flex-column">
                <video autoplay loop class="main-video" controls="controls">
                  <source id="source_video" src="" type="video/mp4">
                </video>

            <div class="video-showcase">
                <div class="row no-gutters">
                    <div class="col-sm-3">
                        <div class="embed-responsive embed-responsive-16by9">
                            <video autoplay loop class="embed-responsive-item" controls="controls" onclick="firstVideo()">
                              <source src="" type="video/mp4">
                            </video>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="embed-responsive embed-responsive-16by9">
                            <video autoplay loop class="embed-responsive-item" controls="controls" onclick="secondVideo()">
                              <source src="" type="video/mp4">
                            </video>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="embed-responsive embed-responsive-16by9">
                            <video autoplay loop class="embed-responsive-item" controls="controls" onclick="thirdVideo()">
                              <source src="" type="video/mp4">
                            </video>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div align="center" class="embed-responsive embed-responsive-16by9">
                            <video autoplay loop class="embed-responsive-item" controls="controls" onclick="fourthVideo()">
                              <source src="" type="video/mp4">
                            </video>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

CSS

.h-100vh {
    height: 100vh;
}

.main-video {
    width: 100%;
    flex: 1 0 0;

}

.sidebar {
    flex: 0 0 300px;


}

@media (max-width: 575px) {

    .sidebar{

        position: absolute;
        top: 0;
        left: 0;
        width: 90%;
        max-width: 300px;
        transform: translateX(-100%);
    }
    .main-video{

        flex: 0 0 56.25%;
    }
    }

Answer 1

我通过添加

解决了该问题

object-fit: fill;

在我的主视频中，还修复了添加上述代码时将出现的一些其他错误。这是我的代码

HTML

<main class="d-flex w-100 h-100vh">
        <aside class="col-md-2 d-none d-md-block bg-light sidebar">
            <div class="col h-100vh d-flex flex-column justify-content-between">
                <div id="header-div">
                    <h1>Simple Text</h1>
                    <hr />
                    <p id="sidebar-text">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br> <br>


                    </p>
                </div>
                <footer>
                    <p class="text-center">
                        <a href="index.html">Home</a>
                        <a id="lang_selected"><b>English</b></a>
                        <a href="es/irma.html">Español</a>
                    </p>
                </footer>
            </div>
        </aside>
        <section class="workspace bg-dark flex-fill">
            <div class="video-container h-100vh d-flex flex-column">
                <video autoplay loop class="main-video" controls="controls">
                    <source id="source_video" src="" type="video/mp4">
                </video>

                <div class="video-showcase">
                    <div class="row no-gutters">
                        <div class="col-sm-3">
                            <div class="embed-responsive embed-responsive-16by9">
                                <video autoplay loop class="embed-responsive-item" controls="controls" onclick="firstVideo()">
                                    <source src="" type="video/mp4">
                                </video>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="embed-responsive embed-responsive-16by9">
                                <video autoplay loop class="embed-responsive-item" controls="controls" onclick="secondVideo()">
                                    <source src="" type="video/mp4">
                                </video>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="embed-responsive embed-responsive-16by9">
                                <video autoplay loop class="embed-responsive-item" controls="controls" onclick="thirdVideo()">
                                    <source src="" type="video/mp4">
                                </video>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div align="center" class="embed-responsive embed-responsive-16by9">
                                <video autoplay loop class="embed-responsive-item" controls="controls" onclick="fourthVideo()">
                                    <source src="" type="video/mp4">
                                </video>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

CSS

html, body{

    overflow:hidden;
}
.h-100vh {
    height: 100vh;
}

.main-video {
    width: 100% !important;
    object-fit: fill;
    flex: 1 0 0;
}

.video-container {

    overflow:auto;
}

.sidebar {
    flex: 0 0 300px;
    overflow:auto;

}

#header-div{

    word-wrap:break-word;
}

@media (max-width: 575px) {

    .sidebar {
        position: absolute;
        top: 0;
        left: 0;
        width: 90%;
        max-width: 300px;
        transform: translateX(-100%);

    }

    .main-video {
        flex: 0 0 56.25%;
    }
}

在调整浏览器大小时使视频具有响应性

1 个答案: