Iframe

// src/components/elements/iframe/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/iframe
additionalProperties: false
required:
  - src
  - title
properties:
  width:
    type: number
  height:
    type: number
  max_width:
    type: number
  src:
    type: string
    format: uri-reference
  loading:
    type: string
    enum:
      - lazy
      - eager
  title:
    type: string
  additional_attributes:
    type: string
  type:
    type: string
    enum:
      - iframe
      - map_box

// src/components/elements/iframe/mocks.yaml

$hidden: true
$variants:
  - $name: Issuu
    src: http://e.issuu.com/embed.html#22176108/31739896
    title: Issuu
    width: 525
    height: 406
  - $name: Google Maps
    src: >-
      https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2367.8025706848753!2d10.018507016111558!3d53.59698428003235!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b18927f859e51b%3A0xc811171d3f0330c5!2sStadtpark!5e0!3m2!1sde!2sde!4v1626422289771!5m2!1sde!2sde
    title: Google Maps
    width: 600
    height: 450
  - $name: Soundcloud
    src: >-
      https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1035376699&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true
    title: Soundcloud
    width: 400
    height: 400
  - $name: Tiki Toki
    src: http://www.tiki-toki.com/timeline/embed/137152/4308693385
    title: Tiki Toki
    width: 16
    height: 9
  - $name: Vimeo
    src: https://player.vimeo.com/video/76979871
    title: Vimeo
    width: 16
    height: 9
  - $name: Spotify
    src: https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3
    title: Spotify
    width: 300
    height: 380
  - $name: Youtube
    src: https://www.youtube.com/embed/fYLMOw9hn2I
    title: Youtube Player
    width: 16
    height: 9
  - $name: Instagram
    src: https://www.instagram.com/p/a1wDZKopa2/embed/
    title: Instagram
    width: 1
    height: 2
  - $name: with max width
    src: https://www.youtube.com/embed/fYLMOw9hn2I
    title: Youtube Player
    width: 16
    height: 9
    max_width: 500
  - $name: with 16/9 fallback ratio
    src: https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3
    title: Spotify

// 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" %}

<div class="Iframe" style="--Iframe-aspect-ratio: {{ aspect_ratio }}; --Iframe-max-width: {{ normalized_max_width }}">
  <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 }}>
  </iframe>
</div>