Dynamische übergeordneten div Breite und Höhe basiert auf HTML5-video-Auflösung

Ich habe eine responsive design-Website mit HTML5-Videos, die bis nimmt die gesamte browser-Breite. Das video von CSS hat width:100%;height:auto; hält die video-Auflösung Verhältnis unabhängig von der Größe des browser-Fensters.

Das Problem würde ich gerne lösen, ist die Einstellung der Höhe der <video>'s übergeordneten div-unter Beibehaltung des übergeordneten div' s width:100% die Eltern ist immer das gleiche Verhältnis wie das <video> auf der ersten laden und die Größe ändern.

Das video ist 640x360. Sagen wir mal das browser-Fenster ist 1280x800. Die video-Auflösung wird die doppelte Größe auf 1280x720 zu passen, es ist 100% der Breite des übergeordneten div-haben 80 Pixel mehr Höhe, weil der das Fenster 800 Höhe. Ich möchte zum einstellen der Höhe des div-720 entsprechen der <video>.

Ich bin immer noch lernen, JS und nicht über das Köpfchen zu lösen. Vielen Dank im Voraus.

Hier ist ein Turnschuh, das kann helfen mit meiner Erklärung (die Größe des Fensters zu replizieren, das Problem. Das Ziel ist nicht einen roten hintergrund zeigt, wenn die Größe des Fensters):
http://jsfiddle.net/alanweibel/UMstP/2/

InformationsquelleAutor Alan Weibel | 2012-11-25

Vorausgesetzt ich habe Sie richtig verstanden wird, beschreibt dieser Artikel einen kleinen trick, den Sie verwenden könnten, um dies geschehen zu lassen, ohne Javascript: http://webdesignerwall.com/tutorials/css-elastic-videos

Können Sie berechnen, eine Polsterung für einen container wenn Sie wissen, das Verhältnis von video und positionieren Sie dann das video absolut in. Ich hab eingestellt, Ihre Geige, um diese Technik zu verwenden: 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%;
}

Das funktionierte perfekt. Toll finden und es Ihnen danken.

InformationsquelleAutor polarblau

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.