htmlの<video>
の映像を引き延ばすにはどうすればいいのでしょうか?
min-width
などを使って幅を伸ばすことはできますが、
そうすると<video>
要素の横に透明な余白ができてしまい、縦横比が一定になってしまいます
どうすればいいのでしょうか?
(snippetは大きな画面で見てください、小さいとレイアウトが崩れます)
#container {
}
:root {
--header-height: 55px;
}
header.topbar {
position: absolute;
width: 100%;
top: 0;
left: 0;
background-color: rgba(224, 226, 224, 1);
z-index: 1000;
}
h1.title {
text-align: center;
font-size: 15px;
}
div.side-pane {
margin-top: calc(var(--header-height) + 3px);
position: relative;
float: left;
width: calc(100% - 1200px - 3%);
height: 900px;
background-color: rgba(224, 226, 224, 1);
overflow-x: hidden;
margin-right: 3%;
}
nav.sidebar {
}
div.video-screen {
position: relative;
float: right;
padding: 0px;
margin: 0;
}
div.video-screen::after {
clear: both;
}
video#video {
z-index: -1;
margin-top: calc(var(--header-height) + 3px);
min-width: 1200px;
max-height: 720px;
width: auto;
height: auto;
}
input[type="text"] {
width: 100%;
display: block;
font-size: 20px;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="container">
<header class="topbar">
<h1 class="title">Recaps</h1>
</header>
<div class="side-pane">
<nav class="sidebar">
<input type="text" placeholder="Search">
<div></div>
</nav>
</div>
<div class="video-screen">
<video id="video" src="worlds.mp4" controls loop>
</video>
</div>
</div>
</body>
</html>