Videogröße bearbeiten

RimFrost

Moin!

Ich hab ein kleines Problem mit der Darstellung von Videos.
Ich möchte gerne das jeweils 2-3 Videos in einer Reihe dargestellt werden. Was bei mir passiert ist das alle Videos in einer Reihe dargestellt werden. Egal ob 2 oder 7. Einzelne Videos sind auch immer rechtsbündig, warum auch immer.
Ich binde die Videos von Youtube über die HTML-Box von Advanced Custom Fields 5 ein und lasse dann noch das Plugin Embed videos and respect privacy (https://wordpress.org/plugins/video-embed-privacy/) drüber laufen.

So sieht es im Moment bei den Videos aus:
https://hoerspielbaer.de/kinderserien/l…nteuermaschine/

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Sailor56

Versuche bitte folgendes CSS im 'zusätzlichen CSS' (vom Dashboard -> Design -> Customizer -> zusätzliches CSS)

HTML

.youtubevorschaubilder {
    flex-wrap: wrap;
    align-items: center;
    align-content: space-between;
}
.video-wrapped {
  width: 32%;
  max-width: 32%;
  margin: 3px auto;
}

RimFrost

Zitat von Sailor56
Versuche bitte folgendes CSS im 'zusätzlichen CSS' (vom Dashboard -> Design -> Customizer -> zusätzliches CSS)
HTML
.youtubevorschaubilder {
    flex-wrap: wrap;
    align-items: center;
    align-content: space-between;
}
.video-wrapped {
  width: 32%;
  max-width: 32%;
  margin: 3px auto;
}

ja jetzt klappts
musste nur noch ein display: flex; hinzufügen

danke für die Hilfe

RimFrost

Kann ich die Höhe des Videos noch irgendwie beeinflussen, damit die alle die selbe Höhe haben?
mit height und max-height passiert nix

Sailor56

nööö... kann ja auch nicht ;)!
Weil dort inline.. also im <img...> Tag selbst ein 'min-height: 428px;' angegeben ist - dieses min-height musst 'ungültig' machen.
zB so:

HTML

div.video-wrapped {
  min-height: unset !important;
}

Allerdings ohne Gewähr, weil ich zur Zeit nicht selber testen kann.

SirEctor

Ich würde es eher so schreiben

CSS

div.video-wrapped {
  min-height: 0 !important;
}

unset versteht nicht jeder Browser.
https://caniuse.com/#search=unset

RimFrost

Danke euch beiden. Jetzt bin ich auch zufrieden :D

Sailor56

Zitat von SirEctor

unset versteht nicht jeder Browser.

.. oh ja... stimmt... war etwas voreilig von mir :(! Dabei hatte ich selbst unlängst in diesem Zusammenhang mit dem IE 11 so meine Probleme.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Videogröße bearbeiten

Jetzt mitmachen!