HTML背景視頻寬高比

所以我試圖在Wordpress中使用全屏背景視頻與二十二主題。當我在全屏顯示器或筆記本電腦後面時，一切正常。但是，只要我放棄我的可信賴的16/9分辨率&使用標準屏幕，視頻的寬高比就會混淆整個事情（背景不會橫跨整個頁面，而是以空白爲中心上面和下面的視頻），雖然我已經嘗試了書中所有的招數 - 最大高度，高度：汽車等HTML背景視頻寬高比

我的HTML：

<video autoplay loop poster="wp-content/themes/murastekylaselts/video.jpg" id="bgvid" muted="muted "> 
<source src="wp-content/themes/murastekylaselts/video/video.webm" type="video/webm"> 
<source src="wp-content/themes/murastekylaselts/video/video.mp4" type="video/mp4"> 
</video>

我的CSS：

video#bgvid { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    background: url(video.jpg) no-repeat; 
    background-size: cover; 
}

您可以瀏覽網頁直播@http://muff1n.eu/muraste

謝謝！

來源

2015-08-24 Roger Crandall

將它包裝在一個帶有此處描述的視頻容器類的div中：http://webdesignerwall.com/tutorials/css-elastic-videos。

.video-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden; 
} 

.video-container iframe, 
.video-container object, 
.video-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

<div class="video-container"> // could also be <body class="video-container"> 
    <video autoplay loop poster="wp-content/themes/murastekylaselts/video.jpg" id="bgvid" muted="muted "> 
    <source src="wp-content/themes/murastekylaselts/video/video.webm" type="video/webm"> 
    <source src="wp-content/themes/murastekylaselts/video/video.mp4" type="video/mp4"> 
    </video> 
</div>

來源

2015-08-24 21:02:18

現在它只是推下了內容 - http://www.upload.ee/image/5154971/Capture.JPG –

唉，這篇文章爲我提供瞭解決方案 - fvsch.com/code/video-background謝謝不過，博！

來源

2015-08-24 21:28:08

HTML背景視頻寬高比

回答

相關問題