3

ブラウザの全幅を占めるHTML5ビデオを使用したレスポンシブデザインサイトがあります。ビデオのCSSにはwidth:100%;height:auto;、ブラウザウィンドウのサイズに関係なくビデオの解像度比を維持する機能があります。

私が解決したい問題は、<video>親divを維持しながら、親divの高さを調整して、親が常に初期ロードおよびサイズ変更時とwidth:100%同じ比率になるようにすることです。<video>

ビデオは640x360です。ブラウザウィンドウが1280x800だとしましょう。ビデオ解像度は、100％の幅に合うようにサイズが2倍の1280x720になりますが、ウィンドウの高さが800であるため、親divの高さは80ピクセル多くなります。そのdivの高さを720に調整して、に一致させたいのですが<video>。

私はまだJSを学んでいて、これを解決する知識がありません。前もって感謝します。

これが私の説明に役立つかもしれないフィドルです（問題を再現するためにウィンドウのサイズを変更します。目標は、ウィンドウのサイズを変更するときに赤い背景が表示されないようにすることです）：http: //jsfiddle.net/alanweibel/UMstP/2/

4

1 に答える 1

4

私があなたを正しく理解していると仮定すると、この記事では、Javascript を使用せずにこれを実現するために使用できるちょっとしたトリックについて説明します: http://webdesignerwall.com/tutorials/css-elastic-videos

ビデオの比率がわかっている場合は、コンテナのパディングを計算してから、ビデオを完全にその中に配置できます。このテクニックを使用するようにフィドルを調整しました: http://jsfiddle.net/SeykC/

<div class="wrap">
    <div class="container">
        <video id="video" controls="controls">
            <source type="video/mp4"
                    src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" />
        </video>
    </div>           
</div>
​

video {
    max-width: 100%;
    height: auto;
}

.container {
    background: red;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.container iframe,  
.container object,  
.container embed,
.container video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}​
于 2012-11-26T08:56:52.777 に答える