The case of the missing YouTube background thumbnail in the Klaro privacy layer

The problem: If you are working with the Klaro Cookie & Consent Management module in Drupal the YouTube privacy layer should show the thumbnail of the video in the background. In my theme it didn’t.

So, on this site the YouTube Consent Layer looked like this:

I thought this was how it was supposed to look. Until someone showed me the layer on another site. My example should have looked like this by default:

After some back and forth in my theme I found the culprit: I had overwritten field.html.twig.

Drupal’s Core uses this Twig code for field.html.twig:

{%
 set title_classes = [
   label_display == 'visually_hidden' ? 'visually-hidden',
 ]
%}
{% if label_hidden %}
 {% if multiple %}
   <div {{ attributes }}>
     {% for item in items %}
       <div {{ item.attributes }}> {{ item.content }} </div>
     {% endfor %}
   </div>
 {% else %}
   {% for item in items %}
     <div {{ attributes }}> {{ item.content }} </div>
   {% endfor %}
 {% endif %}
{% else %}
 <div {{ attributes }}>
   <div {{ title_attributes. addClass(title_classes) }}> {{ label }} </div>
   {% if multiple %}
     <div>
   {% endif %}
   {% for item in items %}
     <div {{ item.attributes }}> {{ item.content }} </div>
   {% endfor %}
   {% if multiple %}
     </div>
   {% endif %}
 </div>
{% endif %}

This means Drupal wraps every field in an (at least one) extra div – the main ingredient in what we used to call a div soup: dozens and hundreds of unnecessary div containers.

So one on the very first things I do in every theme is to get rid of this nonsense. I just use:

{% for item in items %}
 {{ item.content }}
{% endfor %}

Much simpler. And yes, sometimes I need extra markup for a field. But even in bigger projects I usually only need two or three specific field templates to do this. For 99% of fields my minimal template is fine.

But now, nearly ten years after Drupal 8 was released, I had the first case where my minimal template conflicted with a feature from a module. Klaro actually needs the wrapping div for embedded videos.

So, if I want Klaro to show background thumbnails, I have to add a template for field--media--field-media-oembed-video.html.twig with the following code (this is the most minimal code I found that Klaro is ok with.)

{% for item in items %}
<div class="field">
  {{ item.content }}
</div>
{% endfor %}

And voila, the background images are showing up. Together with the title of the YouTube video.

06.06.2025 × Drupal × Twig