設置視頻的寬度和高度

我正面臨有關視頻寬度和高度的問題。現在，它佔據了全屏幕，但我希望它的寬度和高度都是我想要的全尺寸。例如，請參閱http://airbnb.com。如果有人能幫助我。謝謝設置視頻的寬度和高度

<div align="center"> 
<video autoplay loop id="video" class="con"> 
    <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> 
</video> 
<div class="overlay"> 
    <form> 
     <label for="input">Form Input Label</label> 
     <input id="input" name="input" value="" /> 
     <button type="submit">Submit</button> 
    </form> 
</div> 
</div>

這是我使用的CSS。

.con { 
position: fixed; 
top: 50%; 
left: 50%; 
min-width: 100%; 
min-height: 100%; 
width: auto; 
height: auto; 
transform: translateX(-50%) translateY(-50%); 
transition: 1s opacity; 
} 

.overlay { 
position:absolute; 
top:0; 
left:0; 
z-index:1; 
}

來源

2016-04-25 chan

本視頻中存在高度和寬度比率問題。如果我把它的高度降低到70％，它的寬度也會減小。 –

看起來好像你試圖讓視頻的寬度比高度更寬。只需將最小高度改爲50％即可。

來源

2016-04-25 03:19:40 Edward

我試過了..不起作用 – chan

這樣的事情？ https://jsfiddle.net/kfqe7vgw/ – Edward

視頻標籤具有高度和寬度attribut，所以基本上你可以用這一個：

<video autoplay loop id="video" class="con" width="320" height="240"> 
    <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> 
</video>

看到更多關於w3schools

，並根據您的CSS樣式，有一件事你需要的是減少最小高度爲70％或任何你想要的東西。

來源

2016-04-25 03:20:26 Scarlet

不..不工作 – chan

它全屏。它沒有設置高度爲70％ – chan

我試過你的代碼，它工作正常，只是刪除最小高度。看到這個小提琴[https://jsfiddle.net/kfqe7vgw/1/](https://jsfiddle.net/kfqe7vgw/1/） – Scarlet

只需更改最小寬度：auto;

我認爲這會對你有用。

來源

2016-04-25 05:55:27

設置視頻的寬度和高度

回答

相關問題