Kommentar: Als ich das Elemin -Thema codierte (eine reaktionsschnelle Website, die ich kürzlich entworfen habe), war einer der Frame -Skips, auf die ich gestoßen bin, wie man eingebettete Videos flexibler in Größenänderungen erstellt. Durch Stunden der Suche nach Daten und Experimenten fand ich endlich eine Lösung
Als ich das Elemin -Thema codierte (eine reaktionsschnelle Seite, die ich kürzlich entworfen habe), war einer der Frame -Skips, auf die ich gestoßen bin, wie man eingebettete Videos flexibler in Größenänderungen gestaltet. Mit maximaler Breite: 100% und Höhe: Auto kann das HTML5-Video-Tag gut funktionieren. Diese Lösung funktioniert jedoch nicht mit Inline-Code für IFrame- oder Objekt-Tags. Nach mehreren Stunden der Suche nach Daten und Experimenten fand ich schließlich eine Lösung. Diese CSS -Technik ist nützlich, wenn Sie reaktionsschnelles Design durchführen.
Flexibler HTML5 -Video -Tag
Mithilfe von HTML5-Videos können Sie es flexibel machen, indem Sie maximale Breite einstellen: 100%. In der vorherigen Einführung wurde erwähnt, dass es nicht für häufig verwendete IFRames und eingebettete Codes in Objekten anwendbar ist.
Video {
Max-Breite: 100%;
Höhe: Auto;
}
Flexible Objekt- und Iframe -eingebettete Videos
Dieser Trick ist recht einfach. Sie müssen dem Video einen <div> -Container hinzufügen und den Immobilienwert des Padding-Bottoms des Divs zwischen 50% und 60% festlegen. Setzen Sie dann die Breite und Höhe des untergeordneten Elements (Ifame oder Objekt) auf 100%und verwenden Sie die absolute Positionierung. Dies zwingt das eingebettete Objekt, automatisch maximal zu erweitern.
CSS
.Video-container {
Position: Relativ;
Padding-Bottom: 56,25%;
Padding-Top: 30px;
Höhe: 0;
Überlauf: versteckt;
}
.video-container iframe,
.Video-Container-Objekt,
.Video-Container-Einbettung {
Position: absolut;
Top: 0;
links: 0;
Breite: 100%;
Höhe: 100%;
}
Html
<div>
<iframe src = "http://player.vimeo.com/video/6284199?title=0& BYLINE=0&portrait=0" FrameBorder = "0"> </iframe>
</div>
Flexibilität bei fester Breite erreichen
Wenn die Videobreite begrenzt ist, benötigen wir einen zusätzlichen <Div> -Container, um das Video zu wickeln und eine feste Breite und eine maximale Breite zu setzen: 100% für die Div.
CSS
.Video-Wrapper {
Breite: 600px;
Max-Breite: 100%;
}
Html
<div>
<div>
<iframe src = "http://player.vimeo.com/video/6284199?title=0& BYLINE=0&portrait=0" FrameBorder = "0"> </iframe>
</div>
<!- /Video->
</div>
<!- /Video-Wrapper->
Kompatibilität
Dieser Trick unterstützt alle Browser, einschließlich: Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone und iPad.