iframe

// src/components/elements/iframe/iframe.html.twig

{#
  `data-smart-protector` attribute is used for the userCentrics smart data protector.
  This selector is used in the `templates/core/html/html.html.twig`
#}

{% set normalized_width = width is defined and width ? width : 16 %}
{% set normalized_height = height is defined and height ? height : 9 %}
{% set aspect_ratio = (normalized_width / normalized_height)|round(2, "common") %}
{% set normalized_max_width = max_width ? max_width ~ "px" : "none" %}

{# Mobile aspect ratio calculation #}
{% set normalized_mobile_width = mobile_width is defined and mobile_width ? mobile_width : normalized_width %}
{% set normalized_mobile_height = mobile_height is defined and mobile_height ? mobile_height : normalized_height %}
{% set mobile_aspect_ratio = (normalized_mobile_width / normalized_mobile_height)|round(2, "common") %}

<div class="Iframe"
  style="
    --Iframe-aspect-ratio: {{ aspect_ratio }};
    --Iframe-max-width: {{ normalized_max_width }};
    --Iframe-mobile-aspect-ratio: {{ mobile_aspect_ratio }};
  ">
  <iframe
    class="Iframe-element"
    {% if type is defined and type == "map_box"%}data-smart-protector="map_box"{% endif %}
    allowfullscreen
    loading="{% if loading %}{{ loading }}{% else %}lazy{% endif %}"
    src="{{ src }}"
    title="{{ title }}"
    {{ additional_attributes|raw }}>
  </iframe>
</div>