Flex Embed

// src/components/elements/flex-embed/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/flex-embed
required:
  - content
properties:
  modifier:
    type: string
  style:
    type: string
  content:
    type: string
    format: html

// src/components/elements/flex-embed/mocks.yaml

content: <img src="https://via.placeholder.com/320x320" alt="alt">
$variants:
  - $name: Ratio 2x1
    content: <img src="https://via.placeholder.com/320x160" alt="alt">
    modifier: FlexEmbed-ratio--2by1
  - $name: Ratio 3x1
    content: <img src="https://via.placeholder.com/320x107" alt="alt">
    modifier: FlexEmbed-ratio--3by1
  - $name: Ratio 4x3
    content: <img src="https://via.placeholder.com/320x240" alt="alt">
    modifier: FlexEmbed-ratio--4by3
  - $name: Ratio 16x9
    content: <img src="https://via.placeholder.com/320x180" alt="alt">
    modifier: FlexEmbed-ratio--16by9
  - $name: Ratio 2x3
    content: <img src="https://via.placeholder.com/320x360" alt="alt">
    modifier: FlexEmbed-ratio--2by3
  - $name: Ratio dynamic
    content: <img src="https://via.placeholder.com/320x200" alt="alt">
    style: 'padding-bottom: 62.5%'

// src/components/elements/flex-embed/flex-embed.html.twig

<div class="FlexEmbed">
  <div
    class="FlexEmbed-ratio {% if modifier is defined %} {{ modifier }}{% endif %}"
    {% if style is defined %}style="{{ style }}"{% endif %}
  ></div>
  <div class="FlexEmbed-content">
    {{ content|raw }}
  </div>
</div>