Responsive Video Maximale Breite

Ich habe Code gefunden, mit dem Videoeinbettungen schneller reagieren können: http://alxmedia.se/code/2013/10/make-wordpress-default-video-embeds-responsive/

Das Problem ist nicht der Code, der Code funktioniert super! Sie können ein Live-Beispiel sehen unter: http://joshrodg.com/hall/ – das ist sehr in der Entwicklung, scrollen Sie einfach nach unten und schauen Sie sich die Videos an 🙂

Was ich tun möchte, ist eine max-width einzustellen. Wenn ich eine max-width auf das aktuelle div setze, wird das Video abgeschnitten und es gibt schwarze Balken oben und unten. Ich würde es lieben, wenn es eine Möglichkeit gäbe, eine max-width einzustellen, während das Seitenverhältnis beibehalten wird. Die Videos sind einfach zu groß, um sie auf 100% Breite zu belassen … Ich dachte eher an 600px, aber skaliere immer noch auf kleineren Bildschirmen, damit alles reaktionsfähig bleibt.

Der aktuelle Code, den ich benutze, wurde leicht von der ursprünglichen Quelle angepasst, also werde ich weitermachen und es hier posten …

Die function:

 function video_embed( $html ) { return '
' . $html . '
'; } add_filter( 'embed_oembed_html', 'video_embed', 10, 3 );

Das CSS:

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

Generierte Ausgabe:

 

Solutions Collecting From Web of "Responsive Video Maximale Breite"

Also musste ich anscheinend ein bisschen mehr lesen, bevor ich meine Frage gestellt habe.

Nachdem ich die Frage gepostet habe, bin ich rüber gelaufen: https://moodle.org/mod/forum/discuss.php?d=258650 , was ich in den Code eingebaut habe, den ich benutzt habe.

Ich habe meine function wie folgt geändert:

 function video_embed( $html ) { return '
' . $html . '
'; } add_filter( 'embed_oembed_html', 'video_embed', 10, 3 );

Ich habe folgende CSS hinzugefügt:

 .video-container { max-width: 400px; } 

Also, was ich getan habe, war ein video-container Div hinzufügen, die um mein video-wrap div gewickelt, wo ich eine max-width .

Ich habe alle verschiedenen Breiten ausprobiert, die jetzt alle funktionieren 🙂