響應式視頻背景：視頻對齊

我想創建一個響應式背景視頻，但不知道如何更改對齊方式。據我所知，對齊目前是右下角，但我想將它改爲中心。（如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

響應式視頻背景：視頻對齊

回答

相關問題