Twig Template YouTube für Consent Manager

[Matt]

Vor dem Update auf 5.3 hatte ich folgenden HTML-Code für YouTube Videos:

<div class="ce_youtube block">
<figure class="video_container">
<div class="responsive ratio-169">
<iframe width="640" height="360" data-name="youtube" data-src="https://www.youtube.com/embed/XYZ" allow="autoplay; encrypted-media; picture-in-picture; fullscreen" allowfullscreen></iframe>
</div>
</figure>
</div>

Der Consent Manager hat dabei den Inhalt blockiert, bis der Benutzer zugestimmt hatte. Deshalb war die Quelle im Attribut data-src.

Wie kann ich das im TWIG-Template von Contao 5.3 umsetzen?

Ich habe bereits folgendes probiert, ohne eine Änderung zu sehen:

templates/content_element/youtube.html.twig
{% extends "@Contao/content_element/youtube.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_text", "splash_screen_component",
    "splash_screen_button_content",
    "splash_screen_content", "splash_screen_script",
    "picture_component", "image", "sources", "source",
    "schema_org", "content", "iframe",
    "video_caption", "headline_component",
    "headline_attributes", "headline_inner",
    "wrapper", "wrapper_tag", "attributes", "inner",
    "metadata", "style", "script"

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

{% set iframe_attrs = attrs()
    .set('allow', 'autoplay; encrypted-media; picture-in-picture; fullscreen')
    .set('data-name', 'youtube')
    .mergeWith(iframe_attrs|default)
%}

[Spooky]

Die iframe_attrs kannst du nur im iframe block setzen. Aber das wird dir nichts nützen, weil du ja auch das "src" Attribut entfernen willst, ich bin mir nicht sicher ob das möglich ist. Du könntest aber einfach den gesamten iframe block überschreiben:

{% block iframe %}
    {% set iframe_attrs = attrs({width, height, allowfullscreen: true})
        .set('data-src', source.url)
        .set('data-name', 'youtube')
        .setIfExists('title', title|default)
        .mergeWith(iframe_attrs|default)
    %}
    {% do csp_source('frame-src', iframe_attrs.src) %}
    <iframe{{ iframe_attrs }}></iframe>
{% endblock %} 

[Matt]

Danke schon mal, aber wenn ich das in das Template im Backend schreibe wird das nicht im Frontend übernommen.

Das steht jetzt im Template:

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

{% block iframe %}
    {% set iframe_attrs = attrs({width, height, allowfullscreen: true})
        .set('data-src', source.url)
        .set('data-name', 'youtube')
        .set('allow', 'autoplay; encrypted-media; picture-in-picture; fullscreen')
        .setIfExists('title', title|default)
        .mergeWith(iframe_attrs|default)
    %}
    {% do csp_source('frame-src', iframe_attrs.src) %}
    <iframe{{ iframe_attrs }}></iframe>
{% endblock %} 

[Spooky]

Applikationscache danach neu aufgebaut?

[Matt]

Lag am Cache, danach trat ein Fehler auf den ich beheben konnte indem ich folgende Zeile ausbesserte:

  {% do csp_source('frame-src', iframe_attrs.data-src) %} 

[Matt]

<div class="content-youtube">
<figure class="aspect aspect--16:9">
<iframe width height allowfullscreen data-src="https://www.youtube.com/embed/XYZ" data-name="youtube" allow="autoplay; encrypted-media; picture-in-picture; fullscreen"></iframe>
</figure>

Ein Problem habe ich noch gefunden. Die Klasse aspect--16:9 kann ich im CSS nicht ansprechen, da es durch den : ungültig ist.
Kann man da irgendwie machen, dass wie früher aspect-169 steht? Ohne den Doppelpunkt?

Ich finde gerade das Original-Template nicht und kann nicht nachschauen, ob ich selbst drauf komme. In welchem Ordner befindet sich das?

[Spooky]

Ein Problem habe ich noch gefunden. Die Klasse aspect--16:9 kann ich im CSS nicht ansprechen, da es durch den : ungültig ist.

Ungültig ist die CSS Klasse nicht - aber du musst den Doppelpunkt in deinem Stylesheet escapen:

.aspect--16\:9 {

}

Öffne dazu aber ein Ticket auf GitHub, evt. sollte man das vielleicht im Core ändern, damit man das nicht jedes mal berücksichtigen muss.

[Matt]

Ok ich öffne ein Ticket auf Github, ich habe die Klasse angepasst:

{% set video_attributes = attrs()
        .addClass('ratio-' ~ aspect_ratio|replace({':': ''}), aspect_ratio)
        .mergeWith(video_attributes|default)
    %}