Ich erstelle eine Web-App, die ein Layout mit fester Höhe hat (ohne Flex-Box) und ich bin auch durch die Breite eingeschränkt.
Ich möchte den Bildschirm in der Mitte und in der Mitte um etwa 50% für Höhe und Breite zerschneiden.
Im linken Quadranten des Bildschirms möchte ich einen HTML5-Videoplayer einfügen und im rechten Quadranten möchte ich sowohl Text als auch ein Bild einfügen.
Ich kann das Seitenverhältnis des Video-Players beibehalten, indem ich die hier in flex-video angegebene Technik verwende Ссылка
Dies bricht jedoch, wenn das Video in die untere Hälfte des Bildschirms überläuft.
Kann ich dieses Problem irgendwie lösen, indem ich nur CSS verwende?
Hier ist was ich bisher habe
%Vor%Ich habe kürzlich das gleiche Problem gelöst (siehe Ссылка oder darunter):
%Vor%Und in CSS:
%Vor%Wo 56,25% 9/16 * 100% ist.
Sie können das video -Objekt automatisch skalieren lassen, es behält das Seitenverhältnis bei, sobald das Video geladen wird (wenn Play gedrückt wird), wie es das img -Tag macht:
das CSS:
%Vor%der html:
%Vor%der Test: Ссылка
Ich habe es mit den Eigenschaften max-height und min-height eingerichtet.
Leider waren die Video-Links während des Tests nicht verfügbar. Daher konnte ich nicht überprüfen, ob das Video im Container gut gerendert wurde.
Außerdem ändere ich den .video-container in einen floated Block und entferne die .video Styles.
Hier ist der vollständige modifizierte Code:
%Vor%
Tags und Links css html5 video responsive-design