0

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>

1 件の回答 1

2

CSS3のtransformを使用するのは如何でしょう。

video#video {
    -moz-transform: scaleX(1.5);
    -ms-transform: scaleX(1.5);
    -webkit-transform: scaleX(1.5);
    transform: scaleX(1.5);
}

で、横に1.5倍になります。
ただし、再生ボタンなどのコントローラも横長になります。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。