Teilen von HTML5-Übungscode für flexible Videos mit CSS

Als ich Elemin Theme (eine responsive Website, die ich kürzlich entworfen habe) programmierte, stieß ich auf ein Problem beim Überspringen von Frames, nämlich wie man eingebettete Videos bei Größenänderungen flexibler gestalten kann. Durch die Verwendung von max-width:100% und height:auto kann das Video-Tag von html5 gut funktionieren, aber diese Lösung funktioniert nicht für Iframe oder Inline-Code des object-Tags. Nach stundenlangem Suchen und Experimentieren habe ich endlich die Lösung gefunden. Dieser CSS-Trick ist praktisch, wenn Sie responsives Design erstellen. Sie können die endgültige Demo-Adresse besuchen und Ihren Browser vergrößern, um den Effekt zu sehen.

Flexibles HTML5-Video-Tag (Demo)

Wenn Sie HTML5-Video verwenden, können Sie es flexibel gestalten, indem Sie die maximale Breite auf 100 % festlegen. In der vorherigen Einführung wurde erwähnt, dass es nicht für eingebettete Codes in häufig verwendeten Iframes und Objekten geeignet ist.

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

Flexibles Objekt & Iframe eingebettetes Video

Diese Technik ist recht einfach, Sie müssen einen e388a4556c0f65e1904146cc1a846bee-Container für das Video hinzufügen und das hinzufügen p Der Wert des padding-bottom-Attributs liegt zwischen 50 % und 60 %. Stellen Sie dann die Breite und Höhe des untergeordneten Elements (ifame oder Objekt) auf 100 % ein und verwenden Sie die absolute Positionierung. Dadurch wird das eingebettete Objekt automatisch auf seine maximale Größe erweitert.

　CSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

　HTML

<p class="video-container">
    <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe></p>

Flexibilität mit fester Breite

Wenn die Wenn die Breite des Videos begrenzt ist, benötigen wir einen zusätzlichen e388a4556c0f65e1904146cc1a846bee-Container zum Umschließen des Videos und legen eine feste Breite und max-width:100 % für p fest.

　CSS

.video-wrapper {
    width: 600px;
    max-width: 100%;
}

　HTML

<p class="video-wrapper">
    <p class="video-container">
        <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
    </p>
    <!-- /video --></p><!-- /video-wrapper -->

Kompatibilität

Diese Technik unterstützt alle Browser , einschließlich: Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone und iPad.

Das obige ist der detaillierte Inhalt vonTeilen von HTML5-Übungscode für flexible Videos mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!