it-swarm.com.de

Responsive Video Max-Breite

Ich habe festgestellt, dass ein Code, der zum Einbetten von Videos beiträgt, anspricht: 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 unter folgender Adresse sehen: http://joshrodg.com/hall/ - Dies befindet sich noch in der Entwicklung. Scrollen Sie einfach nach unten und schauen Sie sich die Videos an :-)

Ich würde gerne einen max-width setzen. Wenn ich einen max-width für die aktuelle div einstelle, wird das Video abgeschnitten und oben und unten befinden sich schwarze Balken. Ich würde es lieben, wenn es eine Möglichkeit gäbe, einen max-width unter Beibehaltung des Seitenverhältnisses festzulegen. Die Videos sind einfach zu groß, um sie auf 100% Breite zu belassen ... Ich dachte eher an 600px, skaliere aber immer noch auf kleineren Bildschirmen, damit alles ansprechbar bleibt.

Der aktuelle Code, den ich verwende, wurde von der Originalquelle geringfügig angepasst, daher werde ich ihn hier veröffentlichen ...

Die Funktion:

function video_embed( $html ) {
    return '<div class="video-wrap">' . $html . '</div>';
}
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:

<div class="video-wrap">
    <iframe width="500" height="281" src="https://www.youtube.com/embed/hevFL7CiUx4?feature=oembed" frameborder="0" allowfullscreen=""></iframe>
</div>
1
Josh Rodgers

Anscheinend musste ich ein bisschen mehr lesen, bevor ich meine Frage stellte.

Nachdem ich die Frage gestellt hatte, lief ich auf Folgendes: https://moodle.org/mod/forum/discuss.php?d=258650 , was ich in den verwendeten Code einbaute.

Ich habe meine Funktion so geändert, dass sie wie folgt aussieht:

function video_embed( $html ) {
    return '<div class="video-container"><div class="video-wrap">' . $html . '</div></div>';
}
add_filter( 'embed_oembed_html', 'video_embed', 10, 3 );

Ich habe das folgende CSS hinzugefügt:

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

Also habe ich ein video-container div hinzugefügt, das um mein video-wrap div gewickelt ist, wobei ich ein max-width angegeben habe.

Ich habe alle unterschiedlichen Breiten ausprobiert, die jetzt alle funktionieren :-)

1
Josh Rodgers