Größenanpassung des Hintergrundbildes für ccctwoclick

Hallo zusammen,

meine Seite https://marburger-schlosskonzerte.de/ läuft mit J4.2.5, PHP 8.1, alle Erweiterungen (RegularLabs, Akeeba Backup, CookieHint and Consent sowie JCE Editor) sind aktuell.

Um ein Video datenschutzkonform einzubinden, habe ich https://github.com/coolcat-creations/mod_ccctwoclick/ verwendet (danke für die Erweiterung und die Hinweise unter Datenschutz-Einwilligung vor Betrachten von Videos einfordern!).

Es funktioniert alles, außer der Größenanpassung des Bildes, das über „Inhalt vor dem Klick“ unter „Bildgröße“ eingegeben wird. Das ursprünglich eingebundene Bild war breiter; da wurde ein Großteil abgeschnitten; nun habe ich ein schmaleres Bild hochgeladen, und damit funktioniert es auf meinem Bildschirm. (In der mobilen Darstellung wird es abgeschnitten.)

Bei den Einstellungen habe ich alle Optionen getestet („Cover“ und „Contain“ ergaben gleichermaßen, dass gar kein Bild angezeigt wurde) und schließlich hab ich wieder „Auto“ eingestellt. Das aktuelle Bild lässt ein weißes Feld am rechten Rand übrig; das könnte ich natürlich beheben, indem ich das Bild entsprechend dimensioniere und erneut hochlade, aber das gilt ja dann nur für meinen Bildschirm. Natürlich wäre eine responsive Darstellung erstrebenswert. Habt Ihr eine Idee, wie ich das erreichen könnte?

Vielen Dank im Voraus,

Grüße

Anna

Habe jetzt das Modul aus dem Banner (ganze Breite) herausgenommen und in die Position Main-top (Breite des Contents) gesteckt, so sieht es wenigstens auf großen Bildschirmen einigermaßen aus. Das Problem der nicht-Responsivität bleibt aber bestehen.

Vielen Lieben Dank, Christine und @Re:Later! Ich werde versuchen, es umzusetzen, sobald ich Zeit habe.

Hallo zusammen, und danke auch für die 2CYV-Empfehlung, Elwood!

Zunächst noch einmal eine Präzisierung des Problems: Das Video selbst wird responsive angezeigt; es geht nur um das Bild "Inhalt vor dem Klick" (das meinte ich gestern mit "Es funktioniert alles, außer der Größenanpassung des Bildes, das über „Inhalt vor dem Klick“ unter „Bildgröße“ eingegeben wird").

Höhenangabe:

Wenn ich unter Höhe den Wert 0 eingebe, wird gar nichts gezeigt (bzw. nur der Button zur Aktivierung). Lösche ich die 0, wird der Default-Wert von 300px automatisch eingetragen und ein Teil des Bildes entsprechend abgeschnitten. Dies gilt für background-size: Auto wie auch für Contain (aktuelle Einstellung). Dies bewirkt dann auch, dass das Video auch nicht sichtbar ist, wenn man auf "Inhalt aktivieren" klickt.

Wenn ich dafür sorge, dass das Bild in voller Höhe angezeigt wird (Höhe=765px), entsteht bei einer Verkleinerung der Ansicht entsprechend ein Leerraum unter dem Bild. Meintest Du das vielleicht mit "und auch das padding-bottom", christine2? Denn an sich habe ich (aktiv) gar keine Angaben zum Padding-bottom gemacht.

Stef-Ansatz (und aktueller Stand):

Als nächstes habe ich folgende Anpassungen vorgenommen:

1. CCCtwoklick-Modul

- Bildgröße: Contain

- Breite: 100%

- Höhe: 765px (mit 0 wurde zum Schluss nur eine weiße Fläche angezeigt)

- CSS-Klasse Modul: video-stef

2. user.css

img,
iframe {
  max-width: 100%;
}

.embed-container {
  position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
}

.embed-container iframe {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}

/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 75%;
}

.video-stef {
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
}

.video-stef iframe, .video-stef object, .video-stef embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

Nun wird das Bild perfekt responsive angezeigt, aber das CCCtwoklick-Modul funktioniert nicht mehr. Vermutlich wegen des Eintrags ins Feld CSS-Klasse Modul, oder was habe ich falsch gemacht?

Danke im Voraus,

Grüße

Anna

Ich setze vorerst den alten Zustand wieder her (nur, falls noch jemand schauen sollte: Den Stef-Ansatz nehme ich vorübergehend wieder heraus).

Danke soweit für Eure Hilfe!

Grüße

Anna