HAS Green Academy styleguide

Video Embed

1179 × 333 
<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="8261bd91-964e-4faa-a2e2-538c4bc2d1a8" async></script>

<div>
    <video-embed>
        <div class="o-aspect-ratio  o-aspect-ratio--16by9">
            <div class="c-video-embed__front">
                <picture>
                    <img class="c-img  lazyload  c-video-embed__image" data-srcset="https://via.placeholder.com/1600x900 1600w, https://via.placeholder.com/800x450 800w, " data-src="https://via.placeholder.com/160x90" alt="" sizes="auto" width="160" height="90">
                </picture>

                <button type="button" class="o-button-clean  c-video-embed__button" data-video-embed-btn-play>
                    <span class="u-visually-hidden">
                        HAS de gekste afspelen
                    </span>

                    <span class="c-video-embed__play-icon">
                        <svg class="c-icon    " aria-hidden="true">
                            <use xlink:href="../../dist/sprite.svg#icon-play" />
                        </svg>

                    </span>

                    <span class="c-video-embed__time">
                        <span class="o-layout  o-layout--fit  o-layout--gap-tiny">
                            <svg class="c-icon    " aria-hidden="true">
                                <use xlink:href="../../dist/sprite.svg#icon-clock" />
                            </svg>

                            <span>3:43</span>
                        </span>
                    </span>
                </button>
            </div>

            <div hidden class="o-aspect-ratio__item  c-video-embed__message  cookieconsent-optout-marketing" data-video-embed-message>
                <p><a data-renew-consent href="javascript:Cookiebot.renew();">Wijzig je instellingen</a> en accepteer marketing cookies om de video te kunnen bekijken. Of <a href="https://www.youtube.com/watch?v=WdB2bEongVY">bekijk de video op youtube.com</a>.</p>
            </div>

            <iframe _data-cookieconsent="marketing" data-video-embed-video hidden data-lazy-src="https://www.youtube-nocookie.com/embed/WdB2bEongVY?autoplay=1" title="HAS de gekste" allowfullscreen allow="autoplay"></iframe>
        </div>
    </video-embed>
</div>
 
<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="8261bd91-964e-4faa-a2e2-538c4bc2d1a8" async></script>

<div>
  <video-embed>
    <div class="o-aspect-ratio  o-aspect-ratio--16by9">
      <div class="c-video-embed__front">
        {{ render '@atoms-image' image }}

        <button type="button" class="o-button-clean  c-video-embed__button" data-video-embed-btn-play>
          <span class="u-visually-hidden">
          {{ heading }} afspelen
        </span>

          <span class="c-video-embed__play-icon">
            {{> '@atoms-icon' icon='play' }}
          </span>

          <span class="c-video-embed__time">
            <span class="o-layout  o-layout--fit  o-layout--gap-tiny">
              {{> '@atoms-icon' icon='clock' }}
              <span>3:43</span>
            </span>
          </span>
        </button>
      </div>

      <div
        hidden
        class="o-aspect-ratio__item  c-video-embed__message  cookieconsent-optout-marketing"
        data-video-embed-message
      >
        <p><a data-renew-consent href="javascript:Cookiebot.renew();">Wijzig je instellingen</a> en accepteer marketing cookies om de video te kunnen bekijken. Of <a href="https://www.youtube.com/watch?v={{youtubeId}}">bekijk de video op youtube.com</a>.</p>
      </div>

      <iframe
        _data-cookieconsent="marketing"
        data-video-embed-video
        hidden
        data-lazy-src="https://www.youtube-nocookie.com/embed/{{youtubeId}}?autoplay=1"
        title="{{ heading }}"
        allowfullscreen
        allow="autoplay"
      ></iframe>
    </div>
  </video-embed>
</div>
 
{
  "image": {
    "alt": "",
    "src": "https://via.placeholder.com/160x90",
    "lazy": true,
    "width": 160,
    "height": 90,
    "srcset": [
      {
        "src": "https://via.placeholder.com/1600x900",
        "width": 1600
      },
      {
        "src": "https://via.placeholder.com/800x450",
        "width": 800
      }
    ],
    "class": "c-video-embed__image"
  },
  "heading": "HAS de gekste",
  "youtubeId": "WdB2bEongVY"
}

No notes defined.