Als ich Elemin Theme (eine responsive Website, die ich kürzlich entworfen habe) programmierte, stieß ich auf einen Frame-Sprung, der darin bestand, eingebettete Videos bei Größenänderungen flexibler zu gestalten. Durch die Verwendung von „max-width:100 %“ und „height:auto“ kann das HTML5-Video-Tag gut funktionieren, diese Lösung funktioniert jedoch nicht für Iframe- oder Objekt-Tag-Inline-Code. Nach stundenlangem Suchen und Experimentieren habe ich endlich die Lösung gefunden. Dieser CSS-Trick ist praktisch, wenn Sie responsives Design erstellen.
Flexibles HTML5-Video-Tag
Mit HTML5-Video können Sie es flexibel gestalten, indem Sie max-width: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 und eingebettetes Iframe-Video Dieser Trick ist ganz einfach, Sie müssen es tun Fügen Sie einen
-Container hinzu und legen Sie den padding-bottom-Attributwert des div zwischen 50 % und 60 % fest. 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 {
padding-bottom: 56,25%;
padding-top: 0;
overflow: versteckt; 🎜>}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
links: 0 ;
Breite: 100 %;
Höhe: 100 %; 🎜>
Kopieren Sie den Code
Der Code lautet wie folgt:
src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"> 🎜>
Flexibilität bei fester Breite
