ILLUSTRATION WIDGET

Um das Widget einzubinden sind folgende Styles empfohlen:

STYLES


  .u-illustration__iframe-wrapper {
    width: 100%;
    position: relative;
    max-width: 1440px;
  }

  .u-illustration__iframe-wrapper:before {
    padding-top: 150%;
    content: "";
    display: table;
  }

  .u-illustration__iframe {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    border: 0;
  }

  @media (min-width: 768px) {
    .u-illustration__iframe-wrapper:before {
      padding-top: 66.7%;
    }
  }
  @media (max-width: 575px) and (min-width: 100vh) {
    .u-illustration__iframe-wrapper:before {
      padding-top: 66.7%;
    }
  }

HTML


  <div class="u-illustration__iframe-wrapper">
    <iframe src="https://www.ubdigitaldelivery.de/en/gf-illustration/beispiel/" class="u-illustration__iframe" referrerpolicy="no-referrer"></iframe>
  </div>

Aute nulla labore incididunt commodo. Id qui voluptate deserunt ut adipisicing laboris ullamco deserunt quis. Minim pariatur sit aute deserunt ut laboris. Nisi in occaecat culpa reprehenderit non.