Untertitel für YouTube-Vdeo formatieren

Auf meiner Website habe ich ein paar YouTube-Videos eingebettet. Wie bei den Bildern auch, soll darunter kleingedruckt eine kurze Beschreibung erscheinen. Soweit so gut - erst versteckte sie sich nach dem Upgrade von 4.13.54 auf 5.3.x mittig hinter dem Video, dank "position" und "top" ist sie jetzt (wieder) jetzt exakt darunter platziert.

Leider kann ich den Abstand zum jeweils nächstfolgenden Inhaltselement auf der Seite weder über "margin" noch über "padding" beeinflussen. (Beispiel: siehe https://a-klarinette.de/oelen, ganz unten)

Anhang 27997

Code:

---

/* Videounterzeile/-beschriftung */
#main .content-youtube figcaption {
    position: absolute;
    top: 100%;
    margin-bottom:1.5em;
    padding:3px;
    text-align:left;
    font: 90% AncizarSans,sans-serif;       
    color:#000;
    font-weight: 300;}

---

Weiß jemand Rat?

Zitat:

---

Zitat von Achim H.

Auf meiner Website habe ich ein paar YouTube-Videos eingebettet. Wie bei den Bildern auch, soll darunter kleingedruckt eine kurze Beschreibung erscheinen. Soweit so gut - erst versteckte sie sich nach dem Upgrade von 4.13.54 auf 5.3.x mittig hinter dem Video, dank "position" und "top" ist sie jetzt (wieder) jetzt exakt darunter platziert.

Leider kann ich den Abstand zum jeweils nächstfolgenden Inhaltselement auf der Seite weder über "margin" noch über "padding" beeinflussen. (Beispiel: siehe https://a-klarinette.de/oelen, ganz unten)

Anhang 27997

Code:

---

/* Videounterzeile/-beschriftung */
#main .content-youtube figcaption {
    position: absolute;
    top: 100%;
    margin-bottom:1.5em;
    padding:3px;
    text-align:left;
    font: 90% AncizarSans,sans-serif;       
    color:#000;
    font-weight: 300;}

---

Weiß jemand Rat?

---

Nimm das position absolute wieder raus und nutze mal folgendes Template:

templates/content-element/_video.html.twig

PHP-Code:

---

{% extends "@Contao/content_element/_video.html.twig" %}

{% use "@Contao/component/_splash_screen.html.twig" %}

{% block content %}
    {% set video_attributes = attrs(video_attributes|default) %}

    {% if as_editor_view %}
        <p><a href="{{ source.base_url }}" target="_blank" rel="noreferrer noopener">{{ source.base_url }}</a></p>
    {% else %}
        <figure{{ video_attributes }}>
            {% if splash_image %}
                {{ block('splash_screen_component') }}
            {% else %}
                {% block iframe %}
                    {% set iframe_attrs = attrs({width, height, src: source.url, allowfullscreen: true})
                        .addClass('aspect aspect--' ~ aspect_ratio, aspect_ratio)
                        .mergeWith(iframe_attrs|default)
                    %}
                    {% do csp_source('frame-src', iframe_attrs.src) %}
                    <iframe{{ iframe_attrs }}></iframe>
                {% endblock %}
            {% endif %}

            {% block video_caption %}
                {% if caption %}
                    <figcaption{{ attrs(video_caption_attributes|default) }}>
                        {{- caption|insert_tag_raw -}}
                    </figcaption>
                {% endif %}
            {% endblock %}
        </figure>
    {% endif %}
{% endblock %} 


---

Das setzt die "Aspect-Ratio" Klasse in das iframe, damit sollte es dann vermutlich nicht mehr zu dem Problem kommen und das alte Verhalten sollte so wieder hergestellt werden.
Beachte bitte, dass dies nicht harmoniert, wenn ein "Splash Screen" aktiviert ist... für deinen Fall sollte es aber womöglich helfen.

Auch empfehle ich dir den Einsatz eines Consent-Tools, da du für die Einbindung von YouTube, zumindest in Deutschland, eine Einwilligung geben musst.

Die oveleon/contao-cookiebar kannst du hierbei verwenden und auch so einstellen, dass sie nicht immer aufgeht sondern nur beim YouTube Video angezeigt wird.

Es tritt ein Script-Fehler auf, wenn ich das so mache. Die Log-Datei meint dazu:

Code:

---

[2025-08-13T18:55:36.327906+02:00] request.INFO: Matched route "tl_page.73". {"route":"tl_page.73","route_parameters":{"_controller":"Contao\\FrontendIndex::renderPage","_scope":"frontend","_locale":"de","_format":"html","_canonical_route":"tl_page.73","parameters":"","pageModel":{"Contao\\PageModel":[]},"_route":"tl_page.73","_route_object":{"Contao\\CoreBundle\\Routing\\Page\\PageRoute":[]}},"request_uri":"https://a-klarinette.de/oelen","method":"GET"} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
[2025-08-13T18:55:36.826001+02:00] request.CRITICAL: Uncaught PHP Exception Twig\Error\SyntaxError: "Multiple extends tags are forbidden in "@Contao_Theme_a-klarinette/content_element/_video.html.twig" at line 30." at _video.html.twig line 30 {"exception":"[object] (Twig\\Error\\SyntaxError(code: 0): Multiple extends tags are forbidden in \"@Contao_Theme_a-klarinette/content_element/_video.html.twig\" at line 30. at /var/www/vhosts/xxxxxxxxxxx/yyyyyyyyyyyyyyyy/contao/version_5-3/templates/a-klarinette/content_element/_video.html.twig:30)"} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
[2025-08-13T18:55:36.951938+02:00] messenger.INFO: Stopping worker. {"transport_names":["contao_prio_high"]} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
[2025-08-13T18:55:41.291512+02:00] request.INFO: Matched route "tl_page.73". {"route":"tl_page.73","route_parameters":{"_controller":"Contao\\FrontendIndex::renderPage","_scope":"frontend","_locale":"de","_format":"html","_canonical_route":"tl_page.73","parameters":"","pageModel":{"Contao\\PageModel":[]},"_route":"tl_page.73","_route_object":{"Contao\\CoreBundle\\Routing\\Page\\PageRoute":[]}},"request_uri":"https://a-klarinette.de/oelen","method":"GET"} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
[2025-08-13T18:55:41.682224+02:00] request.CRITICAL: Uncaught PHP Exception Twig\Error\SyntaxError: "Multiple extends tags are forbidden in "@Contao_Theme_a-klarinette/content_element/_video.html.twig" at line 30." at _video.html.twig line 30 {"exception":"[object] (Twig\\Error\\SyntaxError(code: 0): Multiple extends tags are forbidden in \"@Contao_Theme_a-klarinette/content_element/_video.html.twig\" at line 30. at /var/www/vhosts/xxxxxxxxxxx/yyyyyyyyyyyyyyyy/contao/version_5-3/templates/a-klarinette/content_element/_video.html.twig:30)"} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
[2025-08-13T18:55:41.792812+02:00] messenger.INFO: Stopping worker. {"transport_names":["contao_prio_high"]} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
[2025-08-13T18:56:30.362816+02:00] request.INFO: Matched route "tl_page.103". {"route":"tl_page.103","route_parameters":{"_controller":"Contao\\FrontendIndex::renderPage","_scope":"frontend","_locale":"de","_format":"html","_canonical_route":"tl_page.103","parameters":"","pageModel":{"Contao\\PageModel":[]},"_route":"tl_page.103","_route_object":{"Contao\\CoreBundle\\Routing\\Page\\PageRoute":[]}},"request_uri":"https://a-klarinette.de/tutorials","method":"GET"} {"request_uri":"https://a-klarinette.de/tutorials","request_method":"GET"}
[2025-08-13T18:56:30.698454+02:00] request.CRITICAL: Uncaught PHP Exception Twig\Error\SyntaxError: "Multiple extends tags are forbidden in "@Contao_Theme_a-klarinette/content_element/_video.html.twig" at line 30." at _video.html.twig line 30 {"exception":"[object] (Twig\\Error\\SyntaxError(code: 0): Multiple extends tags are forbidden in \"@Contao_Theme_a-klarinette/content_element/_video.html.twig\" at line 30. at /var/www/vhosts/xxxxxxxxxxx/yyyyyyyyyyyyyyyy/contao/version_5-3/templates/a-klarinette/content_element/_video.html.twig:30)"} {"request_uri":"https://a-klarinette.de/tutorials","request_method":"GET"}
[2025-08-13T18:56:30.840898+02:00] messenger.INFO: Stopping worker. {"transport_names":["contao_prio_high"]} {"request_uri":"https://a-klarinette.de/tutorials","request_method":"GET"}
[2025-08-13T18:56:35.957468+02:00] request.INFO: Matched route "tl_page.73". {"route":"tl_page.73","route_parameters":{"_controller":"Contao\\FrontendIndex::renderPage","_scope":"frontend","_locale":"de","_format":"html","_canonical_route":"tl_page.73","parameters":"","pageModel":{"Contao\\PageModel":[]},"_route":"tl_page.73","_route_object":{"Contao\\CoreBundle\\Routing\\Page\\PageRoute":[]}},"request_uri":"https://a-klarinette.de/oelen","method":"GET"} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
[2025-08-13T18:56:36.303604+02:00] request.CRITICAL: Uncaught PHP Exception Twig\Error\SyntaxError: "Multiple extends tags are forbidden in "@Contao_Theme_a-klarinette/content_element/_video.html.twig" at line 30." at _video.html.twig line 30 {"exception":"[object] (Twig\\Error\\SyntaxError(code: 0): Multiple extends tags are forbidden in \"@Contao_Theme_a-klarinette/content_element/_video.html.twig\" at line 30. at /var/www/vhosts/xxxxxxxxxxx/yyyyyyyyyyyyyyyy/contao/version_5-3/templates/a-klarinette/content_element/_video.html.twig:30)"} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
[2025-08-13T18:56:36.398456+02:00] messenger.INFO: Stopping worker. {"transport_names":["contao_prio_high"]} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
[2025-08-13T18:57:00.600821+02:00] request.INFO: Matched route "tl_page.73". {"route":"tl_page.73","route_parameters":{"_controller":"Contao\\FrontendIndex::renderPage","_scope":"frontend","_locale":"de","_format":"html","_canonical_route":"tl_page.73","parameters":"","pageModel":{"Contao\\PageModel":[]},"_route":"tl_page.73","_route_object":{"Contao\\CoreBundle\\Routing\\Page\\PageRoute":[]}},"request_uri":"https://a-klarinette.de/oelen","method":"GET"} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
[2025-08-13T18:57:00.952550+02:00] request.CRITICAL: Uncaught PHP Exception Twig\Error\SyntaxError: "Multiple extends tags are forbidden in "@Contao_Theme_a-klarinette/content_element/_video.html.twig" at line 30." at _video.html.twig line 30 {"exception":"[object] (Twig\\Error\\SyntaxError(code: 0): Multiple extends tags are forbidden in \"@Contao_Theme_a-klarinette/content_element/_video.html.twig\" at line 30. at /var/www/vhosts/xxxxxxxxxxx/yyyyyyyyyyyyyyyy/contao/version_5-3/templates/a-klarinette/content_element/_video.html.twig:30)"} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}
[2025-08-13T18:57:01.060934+02:00] messenger.INFO: Stopping worker. {"transport_names":["contao_prio_high"]} {"request_uri":"https://a-klarinette.de/oelen","request_method":"GET"}

---

Zitat:

---

Zitat von Achim H.

Es tritt ein Script-Fehler auf, wenn ich das so mache. Die Log-Datei meint dazu:

Code:

---

"Multiple extends tags are forbidden in "@Contao_Theme_a-klarinette/content_element/_video.html.twig" at line 30."

---

---

Du extendest hier mehrmals. Poste mal den Inhalt des verwendeten Templates (Ich hab das kurz getestet und es funktionierte so).
Hast du den Cache danach auch geleert?

Code:

---

{% extends "@Contao/content_element/_video.html.twig" %}

{#
  ** Add changes to the base template here. **

  Hint: Try adjusting blocks and attributes instead of
  overwriting the whole template. This way your version
  can remain compatible with future changes to the base
  template as well as adjustments made by extensions.

  Currently available blocks:
    "splash_screen_component",
    "splash_screen_button_content",
    "splash_screen_content", "splash_screen_script",
    "picture_component", "image", "sources", "source",
    "schema_org", "content", "iframe",
    "video_caption", "splash_screen_text",
    "headline_component", "headline_attributes",
    "headline_inner", "wrapper", "wrapper_tag",
    "attributes", "inner", "metadata", "style",
    "script"

  Example:
    {% block splash_screen_component %}
      {{ parent() }}
      My additional content for 'splash_screen_component'…
    {% endblock %}
#}

{% extends "@Contao/content_element/_video.html.twig" %}

{% use "@Contao/component/_splash_screen.html.twig" %}

{% block content %}
    {% set video_attributes = attrs(video_attributes|default) %}

    {% if as_editor_view %}
        <p><a href="{{ source.base_url }}" target="_blank" rel="noreferrer noopener">{{ source.base_url }}</a></p>
    {% else %}
        <figure{{ video_attributes }}>
            {% if splash_image %}
                {{ block('splash_screen_component') }}
            {% else %}
                {% block iframe %}
                    {% set iframe_attrs = attrs({width, height, src: source.url, allowfullscreen: true})
                        .addClass('aspect aspect--' ~ aspect_ratio, aspect_ratio)
                        .mergeWith(iframe_attrs|default)
                    %}
                    {% do csp_source('frame-src', iframe_attrs.src) %}
                    <iframe{{ iframe_attrs }}></iframe>
                {% endblock %}
            {% endif %}

            {% block video_caption %}
                {% if caption %}
                    <figcaption{{ attrs(video_caption_attributes|default) }}>
                        {{- caption|insert_tag_raw -}}
                    </figcaption>
                {% endif %}
            {% endblock %}
        </figure>
    {% endif %}
{% endblock %}

---

Wie die Fehlermeldung schon sagt hast du mehrmals "extends" benutzt.

Ich taste mich mit völlger Unkenntnis heran ... ja, das ist doppelt. Hab's einmal entfernt.

Jetzt stimmt der Abstand (margin-top), aber es ist kein Video zu sehen.

---------------------------------------------------------------------------------------------------------------

Zu den Cookies: Danke für den Hinweis. Allerdings habe ich "Die youtube-nocookie.com-Domain verwenden" aktiviert.

Zitat:

---

Zitat von Achim H.

aber es ist kein Video zu sehen

---

Poste dein jetziges Template und das verwendete CSS

Code:

---

{% extends "@Contao/content_element/_video.html.twig" %}

{% use "@Contao/component/_splash_screen.html.twig" %}

{% block content %}
    {% set video_attributes = attrs(video_attributes|default) %}
    {% if as_editor_view %}
        <p><a href="{{ source.base_url }}" target="_blank" rel="noreferrer noopener">{{ source.base_url }}</a></p>
    {% else %}
        <figure{{ video_attributes }}>
            {% if splash_image %}
                {{ block('splash_screen_component') }}
            {% else %}
                {% block iframe %}
                    {% set iframe_attrs = attrs({width, height, src: source.url, allowfullscreen: true})
                        .addClass('aspect aspect--' ~ aspect_ratio, aspect_ratio)
                        .mergeWith(iframe_attrs|default)
                    %}
                    {% do csp_source('frame-src', iframe_attrs.src) %}
                    <iframe{{ iframe_attrs }}></iframe>
                {% endblock %}
            {% endif %}
            {% block video_caption %}
                {% if caption %}
                    <figcaption{{ attrs(video_caption_attributes|default) }}>
                        {{- caption|insert_tag_raw -}}
                    </figcaption>
                {% endif %}
            {% endblock %}
           
        </figure>
    {% endif %}
{% endblock %}

---

Code:

---

/* Videounterzeile/-beschriftung */
#main .content-youtube figcaption {
    /*position: absolute;*/
    top: 100%;
    margin-bottom:1em;
    padding: 5px;
    text-align:left;
    font: 90% AncizarSans,sans-serif;       
    color:#000;
        font-weight: 300;
}

---

Warum brauchst du überhaupt eine Template Anpassung? Untertitel für YouTube Videos werden seit Contao 5.0.0 unterstützt. Ggf. solltest du dir für deine Custom Untertitel eine Migration schreiben.

Hast du danach den Cache gecleared? Das Video wird weiterhin nicht ausgegeben?

Beim CSS für die Figcaption brauchts das `position: absolute` und `top: 100%` nicht mehr.

Zitat:

---

Zitat von Spooky

Warum brauchst du überhaupt eine Template Anpassung? Untertitel für YouTube Videos werden seit Contao 5.0.0 unterstützt. Ggf. solltest du dir für deine Custom Untertitel eine Migration schreiben.

---

Die eingestellte Aspect-Ratio Klasse liegt auf dem Figure in den video_attributes. Da hier aber noch der `padding-top` Hack für responsive-ratio aktiv ist, brauchts position absolute für die figcaption..

Ist die Frage ob es hier ein Bug im Core (des Templates) ist oder/und dem derzeitgen Core CSS für Aspect-Ratio

... weil die Untertitel ohne Abstand zum nächsten Inhaltselement angezeigt werden und jedweder Versuch, diesen Abstand mit "padding" oder "amrgin" zu bewerkstelligen, fehlschlägt. Und da bin ich Ahnungsloser halt einfach mal einem Rat aus dem Forum gefolgt. Die Untertitel sind jetzt super, aber eben die Videos nicht (weil weg).

Zitat:

---

Zitat von Achim H.

... weil die Untertitel ohne Abstand zum nächsten Inhaltselement angezeigt werden und jedweder Versuch, diesen Abstand mit "padding" oder "amrgin" zu bewerkstelligen, fehlschlägt. Und da bin ich Ahnungsloser halt einfach mal einem Rat aus dem Forum gefolgt. Die Untertitel sind jetzt super, aber eben die Videos nicht (weil weg).

---

Alles gut, übrigens ist der Contao-Slack doch schneller bei so einem Support ;) https://contao.org/de/netzwerk -> Contao Slack.

Ich hab dasselbe Template in meiner Dev-Instanz (mit deaktiviertem Twig Cache) erfolgreich testen können. Poste mal einen Link zur Seite, leere vorher auch den Cache.

Zitat:

---

Zitat von Achim H.

... weil die Untertitel ohne Abstand zum nächsten Inhaltselement angezeigt werden und jedweder Versuch, diesen Abstand mit "padding" oder "amrgin" zu bewerkstelligen, fehlschlägt. Und da bin ich Ahnungsloser halt einfach mal einem Rat aus dem Forum gefolgt. Die Untertitel sind jetzt super, aber eben die Videos nicht (weil weg).

---

Ich denke nicht, dass du hier irgendeine Template Anpassung brauchst - sondern nur eine CSS Anpassung.

- - - Aktualisiert - - -

Zitat:

---

Zitat von zoglo

Alles gut, übrigens ist der Contao-Slack doch schneller bei so einem Support ;) https://contao.org/de/netzwerk -> Contao Slack.

---

Slack is not indexable.

Zitat:

---

Zitat von Spooky

Ich denke nicht, dass du hier irgendeine Template Anpassung brauchst - sondern nur eine CSS Anpassung.

---

Siehe https://community.contao.org/de/show...l=1#post597640

Zitat:

---

Zitat von Spooky

Slack is not indexable.

---

That's true <3 #WhenFlarumMigration

https://a-klarinette.de/tutorials
https://a-klarinette.de/oelen
https://a-klarinette.de/ligaturen

@Achim

Ich vermute, dass du hier vermutlich das responsive.css Framework aus deinem Layout entfernen solltest und dir entsprechend das Layouting selber mit CSS stylest für deine YouTube Videos:

Wir reden hier von der folgenden CSS: https://github.com/contao-components...responsive.css

Code:

---

.responsive {
    position:relative;
    height:0;
}

---

Durch die Klasse .responsive wird die Höhe auf 0 gesetzt, ab da wirds kritisch. Das liegt auf dem figure, die figcaption ist natürlich innerhalb und erhält die Höhe nur noch durch das Seitenverhältnis.

Ohne Templateanpassung und mit eigenem CSS kommst du aber zum Ziel. Meine Lösung war eher dafür gedacht, dass das Framework es für dich erledigt... Templateanpassungen sind aber nicht notwendig, wenn du CSS beherrschst.

*Edit*

Deine Videos sind da, die gepostete Lösung von mir passt aber nicht mit dem Framework... Also:

• Template wieder entfernen
• Im Layout die responsive.css entfernen aus den CSS-Frameworks
• Eigenes CSS hinzufügen (Da captions ja nun neu sind)

Jetzt wird's kompliziert.

Code:

---

.responsive

---

taucht in meinem CSS-Universum überhaupt nicht auf.

Zitat:

---

Zitat von Achim H.

https://a-klarinette.de/tutorials
https://a-klarinette.de/oelen
https://a-klarinette.de/ligaturen

---

Die aspect aspect--16:9 Klassen liegen hier auf dem falschen Element. Du scheinst hier ein angepasstes Template zu haben.

Zitat:

---

Zitat von Spooky

Die aspect aspect--16:9 Klassen liegen hier auf dem falschen Element. Du scheinst hier ein angepasstes Template zu haben.

---

@Spooky :D :D :D... Es ist das angepasste Template welches ich gepostet habe, ja, es ist nicht korrekt :)

Siehe https://community.contao.org/de/show...l=1#post597646

---

• Template wieder entfernen
• Im Layout die responsive.css entfernen aus den CSS-Frameworks
• Eigenes CSS hinzufügen (Da captions ja nun neu sind)

Ich habe halt das oben vorgeschlagene genommen.

Wenn das nicht korrekt ist, ob ich dann ein korrektes bekommen könnte?

Wie schon erwähnt brauchst du für dein Vorhaben vermutlich kein angepasstes Template. Lösche das angepasste Template und fange nochmal von vorne an ;)

Dann sieht' s halt weider wie am Anfang aus.

So geht's nicht

Code:

---

/* Videounterzeile/-beschriftung */
#main .content-youtube figcaption {
    position: absolute;
    top: 100%;
    margin-bottom:1em;
    padding: 5px;
    text-align:left;
    font: 90% AncizarSans,sans-serif;       
    color:#000;
        font-weight: 300;
}

---

und so auch nicht (allerdings in Contao 4.13.54 noch einwandfrei):

Code:

---

/* Bildunterzeile/-beschriftung */
#main figcaption {
    margin-bottom:1.5em;
    padding:5px;
    text-align:left;
    font: 90% AncizarSans,sans-serif;       
    color:#000;
    font-weight: 300;
}

---

Zitat:

---

Zitat von Achim H.

Ich habe halt das oben vorgeschlagene genommen.

Wenn das nicht korrekt ist, ob ich dann ein korrektes bekommen könnte?

---

Siehe https://community.contao.org/de/show...l=1#post597651

Falls du das CSS nicht selber schreiben kannst, dann empfehle ich die erstmal die Deaktivierung des "responsive-frameworks" innerhalb deines Layouts. Danach könntest du für dein Element und das IFrame aspect-ratio nutzen

Zitat:

---

Zitat von Achim H.

Dann sieht' s halt weider wie am Anfang aus.

---

Heißt was genau? Aus deinen vorherigen Posts bin ich mir nicht sicher, was du nun eigentlich haben möchtest.

Wie am Anfang - ohne Untertitel (bzw. derselbige hinter dem Video verborgen).
-------------------------------------------------------------------------------------------
Ich dank für Eure Zeit und Mühen - aber mit dem Upgrade und Relaunch meiner Websites möchte ich jetzt erst einmal fertig* sein, und da bei YouTube auch die Datenverarbeitungsfrage nicht ganz einfach ganz sauber zu lösen ist, habe ich mich jetzt gegen die Einbettung von Videos und für die Anzeige von Bildern mit "ganz normalen" externen Links entschieden. Da kann dann jeder beim Aufriuf von YouTube über die Verwendung seiner Daten entscheiden, und mein Layout ist "sauber".




* Mit dem neuen Akkordeon-Element muss ich mich noch beizeiten befassen ;-)

Moin,

falls noch von Interesse, hier eine Möglichkeit Youtube-Video und Untertitel mit CSS-Grid zu platzieren.

Bei diesem CSS-Snippet muss ein Seitenverhältnis angegeben werden, sonst greifen die CSS Anweisungen für asptect-ratio nicht, und es die Höhe des iframes passt sich nicht an.
Außerdem wird der Wert für die Breite bei der Player-Größe ignoriert. Durch das CSS wird das iframe auf die Breite des Elternelements gezogen. Am besten lässt man Player-Größe leer und gibt nur ein Seitenverhältnis an.

Den Abstand zum nachfolgenden Inhaltselement kann man dann entweder der figcaption geben, oder man gibt Margin und Padding direkt dem Youtube-Inhaltselement (siehe letze CSS Anweisung im Snippet).

Code:

---

/* content-youtube.css */

.content-youtube > figure {
  display: grid;
  gap: 1rem; /* Abstand zwischen Untertitel und Video */
  place-items: center; /* Video und Untertitel zentriert */
 
  & iframe {
    width: 100%; /* Breite des iframes so breit wie das Elternelement */
  }
 
  /* alle Seitenverhältnisse aus den Einstellungen im Inhaltselement */
  &.aspect--16\:9 > iframe {
    aspect-ratio: 16/9;
  }
 
  &.aspect--16\:10 > iframe {
    aspect-ratio: 16/10;
  }
 
  &.aspect--21\:9 > iframe {
    aspect-ratio: 21/9;
  }
 
  &.aspect--4\:3 > iframe {
    aspect-ratio: 4/3;
  }
 
  &.aspect--3\:2 > iframe {
    aspect-ratio: 3/2;
  }

  /* Untertitel Schriftgröße und ggf. hübscher Zeilenumbruch */
  & > figcaption {
    font-size: .9rem;
    text-wrap: balance;
  }
}

/* margins und Paddings zu benachbarten Elementen z.B. so: */
.content-youtube {
  margin-block-end: 2rem;
}

---

Gruß
Mathias

Zitat:

---

Zitat von Achim H.

Wie am Anfang - ohne Untertitel (bzw. derselbige hinter dem Video verborgen).

---

Das sollte sich ja mit einer CSS Anpassung einfach lösen lassen.