响应式视频背景：视频对齐

我想创建一个响应式背景视频，但不知道如何更改对齐方式。据我所知，对齐目前是右下角，但我想将它改为中心。（如background-position：center center）响应式视频背景：视频对齐

有什么办法可以实现这个吗？

HTML：

<video autoplay loop poster="http://demosthenes.info/assets/images/polina.jpg" id="bgvid"> 
    <source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm"> 
    <source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4"> 
</video>

CSS：

video { 
    position: fixed; 
    display:block; 
    right: 0; 
    bottom: 0; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    background-color:#fff; 
    background:url(../img/schrijven.jpg) no-repeat; 
    background-size: cover; 
    background-position: center center; 
}

来源

2014-10-07 Lisa

有它左上角只是改变的右侧和底部属性，顶部和左侧 – 2014-10-07 13:44:45

OK，这是具足简单！有什么方法可以集中它吗？ – Lisa 2014-10-07 13:47:34

试试这个代码DEMO

<div id="info"> 
Responsive Youtube embed...... 
</div> 
<div class="holder"> 
    <div class="video-container"> 

    </div> 
    </div> 
<button onclick="nextVideo()">Next Video</button> 
</div> 

.video-container { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 30px; /* size of chrome */ 
    height: 0; 
    overflow: hidden; 
} 

.video-container iframe, 
.video-container object, 
.video-container #overlay, 
.video-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
#overlay { 
    background:#000; 
    opacity:0.5; 
    /*background:rgba(255,255,255,0.8); or just this*/ 
    z-index:50; 
    color:#fff; 
}

来源

2014-10-07 13:54:04

或http://codepen.io/pavlovsk/pen/wDroi – 2014-10-07 13:55:15

您显示的代码仅将宽度设置为高度的“规则”，当居中过小时会导致空白：并且空白仅出现在底部的元素，那么如果我没有错，视频不会居中。 – Lisa 2014-10-07 14:23:50

另一个项目底部还有以下链接，你看过了吗？ – 2014-10-07 14:25:54

本是完美

video { 
    position: fixed; 
    display:block; 
    right: 0; 
    bottom: 0; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    background-color:#fff; 
    background:url(../img/schrijven.jpg) no-repeat; 
    top: 0px; 
    left: 0px; 
    background-size: cover; 
    background-position: 50% 50%; 
    /*background-position: 30% 50%;*/ 
}

See it in action.

来源

2014-10-07 13:55:33 AvrilAlejandro

这不是集中？至少不是小提琴？ – Lisa 2014-10-07 14:20:37

响应式视频背景：视频对齐

回答

相关问题