Videos automatsch auf Tabellenbreite skalieren

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:

#tablepress-2 th {
  width: 100% !important;
  max-width: 355px;
}
#tablepress-2 div.wp-video {
  width: 100% !important;
  max-width: 320px;
}
#tablepress-2 div.wp-video video {
  width: 100%;
  max-width: 320px;
  height: unset !important;
}


@media screen and (min-width: 44.375em) {
  .page-id-2798 .entry-content {
    margin-right: 7.6923% !important;
  }
 
}

Dieser Code sollte im 'zusätzlichen CSS' (vom Dashboard -> Design -> Customizer -> zusätzliches CSS) eingefügt werden

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

@media screen and (min-width: 44.375em) {
  .page-id-2798 .entry-content {
    margin-right: 7.6923% !important;
  }

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?

Die Bekannte lässt auch danken :)

Freut mich wenn ich helfen konnte.