Question

我的主要目标是成功，我希望在我的页面顶部有一个背景视频，但现在的问题是我希望视频具有响应性，它有点响应但是以错误的方式，当我减少屏幕视频变小，而不是增加高度，刚刚发生的是宽度和高度变小我只想要宽度变小，高度增加。

这是一个例子：

当前行为：

我需要什么：

我的HTML代码：

<section class="custom content_section bg_fixed white_section bg2">
        <div class="embed-responsive embed-responsive-16by9">


            <div id="video_overlays"></div>

            <div class="container vertical-center">
                <div id="over">
                    <div class="title-wrapper main_title  centered upper">
                        <h2 id="video_title"><span class="line"></span>VIDEO TITLE</h2>
                    </div>

                    <div class="description4 centered">
                        <p id="video_sub_title"><b>LOREM IPSUM A SIMPLE DESCRIPTION<br>
Usability and simple deployment are the key words.</b></p>

                    </div>
                </div>
            </div>
            <div id="player" width="100%" height="100%" style="z-index:-1">
            </div>
        </div>

    </section>

Answer 1

这是一个有效的例子：

http://codepen.io/panchroma/pen/YVKNdr

为包含视频的div尝试以下样式。重要的是你将min-height和min-width设置为100％，然后使用transform：translate来使视频居中。

希望这有帮助！

<强> CSS

#player {
  position: fixed;
  top: 50%; left: 50%;
  z-index: -1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}

Answer 2

试试这个

CSS

#videocontainer{
    position:absolute;
    z-index:-1;
    background:url(../the link to image when video uploads or not supported by browser.jpg) center center no-repeat;
    background-size:cover;
    width:100%;
    height:100%;
}
.videobg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
    z-index: 1;
}

您的HTML

<div class="videocontainer>
    <video class="videobg" controls autoplay loop id=player  poster="http://the link to image when video uploads or not supported by browser" >
        <source src="link to your mp4 video file.mp4" type="video/mp4" >
    </video>
</div>

响应式视频不会按预期进行调整

2 个答案: