1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

WP <5.0 Videos automatsch auf Tabellenbreite skalieren

Dieses Thema im Forum "Design" wurde erstellt von Frank9652, 27. Mai 2018.

Schlagworte:
  1. Frank9652

    Frank9652 Well-Known Member

    Registriert seit:
    10. Juni 2011
    Beiträge:
    719
    Zustimmungen:
    5
    Hallo Leute!

    Ich helfe einer Bekannten gerade bei ihrer Homepage und habe da ein Problem bei dem ich nicht weiterkomme.

    Sie hat eine Seite erstellt und in eine 3-spaltige Tablepresstabelle Videos eingebunden.
    Jedes Video hat eine Breite von 320 Pixeln - macht zusammen 960 Pixel Gesamtbreite ohne Zwischenräume. Nun sollen die Videos automatisch in die Tabelle skaliert werden so dass die maximale Breite der Tabelle ausgenutzt wird. Das klappt aber nicht.
    In der Frontendansicht laufen die Videos nach rechts "aus dem Rahmen" und werden nicht skaliert.
    Das komische an der Sache ist, das wenn man über ein Browserfenster über das Backend angemeldet ist, und ruft die Videoseite über ein zweites Fenster auf - dann werden die Videobreiten automatisch an die maximale Tabellenbreite angepasst.

    Die einfachste Sache wäre, wenn man einen CSS-Code einfügen kann, der die Videos automatisch runterskaliert.
    Der umständlichere Weg wäre, jedes einzelne Video noch einmal zu verkleinern, bis sie nicht mehr nach rechts "aus dem Ruder" laufen.
    Das benutzte Theme ist "Twenty sixteen"
    HIER der Link zur Videoseite.
    Wäre toll, wenn da jemand einen CSS-Code hätte mit dem ich es hinbekommen könnte.
    nichtskaliert.jpg
    Danke fürs lesen

    Gruß Frank
     
  2. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    102
    Für diese Zwecke ist ein Tabelle wohl das ungünstigste Element, was man wählen kann... zu starr, zu unflexibel und vor allem mit den vielen absoluten Größenangaben kaum so darzustellen, wie man es gerne hätte :(!
    Aber sei es drum, da mir momentan keine bessere Methode einfällt, die man ohne größeren Aufwand hier einbauen könnte, hier zumindest ein Versuch etwas mit CSS zu verbessern:
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Dieser Code sollte im 'zusätzlichen CSS' (vom Dashboard -> Design -> Customizer -> zusätzliches CSS) eingefügt werden

    .. und natürlich anschließend ausgiebig testen, ob nicht irgendwo ungewollte Effekte auftreten.
    Wenn es nicht klappen sollte, einfach den Code wieder aus dem zusätzlichen CSS löschen.
     
    Frank9652 gefällt das.
  3. Frank9652

    Frank9652 Well-Known Member

    Registriert seit:
    10. Juni 2011
    Beiträge:
    719
    Zustimmungen:
    5
    Vielen vielen Dank, hat sehr gut geklappt.
    Tablepress hat einen eigenen Bereich für Custom-CSS wo ich es eingetragen habe.
    Wäre toll wenn du beschreiben könntest was du gemacht hast - habe es nicht so recht kapiert.
    Das mit 355px habe ich nicht kapiert.
    Dann öffnest du die DIV und setzt die Fenster auf Maximalbreite von 320 Pixeln.
    aber warum zweimal?
    Und was bewirkt heigh: unset? Wird damit nicht das Vorherige wieder verworfen?
    In HTML muss ich ja ein geöffnetes DIV wieder schließen, muss man das bei CSS nicht?
    Und das mit Mediascreen habe ich komplett nicht verstanden, ausser dass du eine Minimalbreite von irgendwas definierst, die Seite 2798 aufrufst, und etwas rechtsbündig 7% von rechts anordnest.

    Danke auch für dein tolles Video - es besticht besonders heraus weil es sehr gut erklärt ist.
    Ab und zu habe ich mich immer geärgert, wenn ich Änderungen in der CSS gemacht hatte, die ich nach jedem Wordpress-Update wieder neu machen musste. Jetzt weiß ich wie es anders geht.

    Vielen Dank nochmal für alles.

    Gruß Frank
     
  4. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    102
    Klar kann ich dir das näher erklären, was ich da gemacht habe. Und wenn das mit dem Custom-CSS von Tablepress auch klappt, um so besser. Allerdings arbeite ich nicht mit Tablepress und kann da über die 'Internas' nicht viel sagen. Du solltest nur aufpassen, dass dir diese Änderungen bei einem evtl. Update nicht verloren gehen bzw von den Defaults überschrieben werden.
    Aber zum Grundsätzlichen... für ein 'responsive' Design sind absolute Größenangaben (width / height) absolut kontraproduktiv. Wenn du mal in dein Ursprungs-CSS schaust, sind da jede Menge von diesen festen Größen drin. Wenn jetzt das Display/ Browserfenster schmaler wird als die Summe der Breiten der Inhalte, hat der Browser ein Problem - er wird dann zunächst versuchen durch Zeilenumbrüche sich Platz zu verschaffen. Bei Tabellen klappt das aber nicht - wenn da 3 Zellen pro Reihe sind und die noch eine fest vorgegeben Breite haben, dann kann er nur durch Überlappung oder durch horizontales Scrollen ein Ergebnis erzeugen.
    Was ich da gemacht habe ist ganz einfach... ich nehme dem Browser den Zwang, sich an die Breitenvorgabe zu halten, indem ich allen derartigen Vorgaben sage... nimm dir soviel Platz, wie zur Verfügung steht (width: 100%;) werde aber nicht größer als ein bestimmter Wert (max-width: [irgendwas]px;). Solange das Display genug Platz bietet, wirkt dann das 'max-width' - wird das Display dann zu schmal, nehmen sich die Element nur noch denn Platz, der zur Verfügung steht (100%).
    Die 'max-width' - Werte (zB die 355px und die 320px),die ich eingetragen habe, sind die Werte, die original von deiner Seite vorgegeben wurden. Die waren ja ok... die Anzeige bei genügend Breite des Displays war ja in Ordnung. Ich habe für den Browser nur den Zwang weggenommen sich an diesen Vorgaben zu halten.
    Warum ich das mit den 320px 2 mal gemacht habe? ... hmmm... habe ich gar nicht ;)! Das sind 2 verschiedene Elemente, denn ich die selben Werte zugewiesen habe.
    '#tablepress-2 div.wp-video' ist das Element, in dem das Video drin ist...
    '#tablepress-2 div.wp-video video' ist das Video selbst.
    Und das 'unset' beim Video ist nun notwendig, weil im Originalcode hier eine Höhe vorgegeben war - dieser Anweisung würde der Browser weiterhin folgen - nun habe ich aber die Breite des Videos variabel gemacht, was bei schmaler werdender Anzeige und fester Höhe zu Verzerrungen führen würde. Deswegen muss die Höhenangabe weg.
    Das mit der
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    musste ich machen, weil aus irgendeinem Grund bei dieser Bildschirmbreite ('screen and (min-width: 44.375em)') von deinem Theme der rechte Rand verändert wurde. Den musste ich wieder auf den Wert setzen, denn er bei allen anderen Displaybreiten hat, sonst wäre die Tabelle plötzlich viel schmaler dargestellt worden. Kann sein, dass auf einer Seite hier sowas wie Sidebar eingeblendet werden soll und dafür der größere Rand benötigt wird - auf dieser Seite wird da aber nichts dergleichen benötigt und deswegen habe ich es hier auch rückgängig gemacht! Durch die '.page-id-2798' als Selektor ist auch sicher gestellt, dass diese Anweisung nur auf dieser Seite wirkt und die anderen Seiten, wo dieser größere Rand benötigt wird, eben nicht verändert werden.
    Zum Verständnis... mit CSS öffnet man keine Elemente! Man wählt mit diesen Selektoren (zB '.page-id-2798 .entry-content') ein Element aus und weist diesem Element dann bestimmte Eigenschaften/ Formate zu. Es muss also nicht geschlossen werden, weil man ja nichts öffnet. Na ja... die Anweisung als solches muss ich natürlich durch eine geschweifte Klammer { öffnen und am Ende wieder } schließen. ... sonst funktioniert das nicht ;)!
    Hab ich was vergessen?
     
  5. Frank9652

    Frank9652 Well-Known Member

    Registriert seit:
    10. Juni 2011
    Beiträge:
    719
    Zustimmungen:
    5
    Vielen Dank für deine ausführliche Erklärung.

    Gruß Frank
     
  6. chatzehus

    chatzehus Well-Known Member

    Registriert seit:
    9. April 2015
    Beiträge:
    130
    Zustimmungen:
    1
    Die Bekannte lässt auch danken :)
     
  7. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    102
    Freut mich wenn ich helfen konnte.
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden