我有一個問題，一旦螢屏開始達到一定的寬度，視頻就會開始超過瀏覽器的高度和寬度，并出現水平和垂直滾動條。我已經掙扎了幾個小時試圖弄清楚如何解決它。有沒有辦法在大螢屏上保持視頻全寬和全高而不會溢位？
如果您的螢屏不夠大，您可能無法回答這個問題（盡管如果您擅長開發工具，則可以模擬更大的螢屏）。
這里是全屏代碼和框的鏈接，這里是代碼和框編輯器代碼的鏈接。
我還將在此處包含我的代碼，但它在編輯器和瀏覽器中內置的 Stacks 中用處不大。
body {
height: 100vh;
width: 100vw;
margin: 0;
}
nav {
background: black;
height: 4em;
}
.player-group {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}<html>
<body>
<nav></nav>
<div class="player-group">
<video>
<source
src="http://media.xiph.org/mango/tears_of_steel_1080p.webm"
type="video/webm"
/>
</video>
</div>
</body>
</html>uj5u.com熱心網友回復：
- 洗掉導航標簽。
- 洗掉 .player-group -> padding-bottom 并添加高度屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
body {
height: 100vh;
width: 100vw;
margin: 0;
}
nav {
background: black;
height: 4em;
}
.player-group {
position: relative;
width: 100%;
height: 100%;
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="player-group">
<video>
<source
src="http://media.xiph.org/mango/tears_of_steel_1080p.webm"
type="video/webm"
/>
</video>
</div>
</body>
</html>uj5u.com熱心網友回復：
這可能會奏效：
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
nav {
background: purple;
height: 4em;
}
.player-group {
padding: 0px;
margin: 0 auto 10px auto;
background-color: greenyellow;
}
video {
display: block;
object-fit: contain;
max-width: 100vw;
max-height: 85vh; /* value depends on nav height */
margin: 0 auto;
}
</style>
</head>
<body>
<nav></nav>
<div class="player-group">
<video controls name="media">
<source
src="http://media.xiph.org/mango/tears_of_steel_1080p.webm"
type="video/webm"
/>
</video>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353054.html