24062


htmlの`<video>`の映像を引き延ばすにはどうすればいいのでしょうか?  
`min-width`などを使って幅を伸ばすことはできますが、  
そうすると`<video>`要素の横に透明な余白ができてしまい、縦横比が一定になってしまいます

どうすればいいのでしょうか?  
(snippetは大きな画面で見てください、小さいとレイアウトが崩れます)

[code]

    #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;
    }
[/code]

[code]

    <!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>
[/code]


CC BY-SA 3.0
2016-04-15T13:03:55.087
24054
2016-04-15T18:49:45.007
5246
question
html5 video
html5 videoの映像を引き延ばす


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

[code]

    video#video {
        -moz-transform: scaleX(1.5);
        -ms-transform: scaleX(1.5);
        -webkit-transform: scaleX(1.5);
        transform: scaleX(1.5);
    }
    
[/code]

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


CC BY-SA 3.0
2016-04-15T18:49:45.007
24062
2016-04-15T18:49:45.007
6092
24054
answer