需要調整CSS的HTML5視頻的大小

我有這個example。所有我需要它使視頻height:600px;而不是固定的位置，我只想在我的網站的第一部分，當我試圖改變位置和高度的視頻變得更小，我應該包裝它div什麼的？需要調整CSS的HTML5視頻的大小

的HTML：

<div id="bg"> 
<video src="video/video.mp4" id="bg-video" muted autoplay loop ></video> 
</div>

的CSS：

#bg { 
    position: static; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%; 
} 

#bg video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%; 
    min-height: 50%; 
    filter: blur(3px); 
    -webkit-filter: blur(3px); 
}

來源

2014-02-25 Mohamed Samy

-1

它在我腦海中最簡單的辦法是

HTML：

<body> 
    <div id="bg"> 
    <div class="wrapper"> 
     <video src="video/video.mp4" id="bg-video" muted="" autoplay="" loop=""></video> 
    </div> 
    </div> 
</body>

CSS：

#bg .wrapper { 
    height: 600px; 
    /* those two are only to center the video horizontally*/ 
    width: 1067px; 
    margin: 0 auto; 
}

所以，你可以刪除樣式#bg和#bg video

來源

2014-02-25 14:52:02 h4cky

對不起@ h4cky，無法正常工作：S –

它沒有達到預期的效果或什麼？檢查了這一點 - http://jsfiddle.net/8z2vV/ – h4cky

首先，使頂部的視頻留在你的頁面，你將不得不改變包裝div的位置絕對。

然後，您還必須調整當前的相對高度（200％）並將其設置爲固定的600像素。爲了讓您的視頻完全填充div的600像素，請將視頻高度設置爲100％（或者也可以設爲600像素）。您可能還想從視頻的div或邊距中移除任何填充。

請注意，使用此代碼，您的視頻仍將具有相對寬度！只需將我對高度所做的更改應用於這些事情。

#bg { 
position: absolute; 
top: 0px; 
left: -50%; 
width: 200%; 
height: 600px; 
padding: 0px; 
} 

#bg video { 
position: absolute; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
margin: 0 auto; 
min-width: 50%; 
height: 100%; 
filter: blur(3px); 
-webkit-filter: blur(3px); 
}

來源

2014-02-25 14:55:04

需要調整CSS的HTML5視頻的大小

回答

相關問題