<div class="video-player">
    <picture class="visual">
        <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
        <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
        <img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
    </picture>

    <span class="video-player__trigger">
        <span class="video-ID">agkb5TSjEmc</span>

        <span class="icon-play">
            <span class="icon-play__inner"></span>
            <span class="icon-play__icon">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                    <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                </svg>
            </span>
        </span>
    </span>
</div>
<div class="video-player">
  {{render '@visual' image }}

  <span class="video-player__trigger">
    {{#if video.id }}
      <span class="video-ID">{{ video.id }}</span>
    {{/if}}

    {{#if video.url }}
      <span class="video-url">{{ video.url }}</span>
    {{/if}}

    {{> @icon-play }}
  </span>
</div>
/* No context defined. */
  • Content:
    .video-player:not([data-video]):not(.video-thumb):not(.controlbtn) {
      // :not(.controlbtn) legacy reasons 🙄
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      background-color: var(--color--neutrals-1);
      cursor: pointer;
    }
    
    .video-player__trigger:not(.snippet-b) {
      transform: translate(-50%, -50%);
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: 60px;
      cursor: pointer;
    
      @media (min-width: 750px) {
        width: 100px;
      }
    
      .snippet-c & {
        transform: translate(0, 0);
        position: absolute;
        top: auto;
        right: var(--gap--4);
        bottom: var(--gap--4);
        left: auto;
        width: 48px;
    
        @media (min-width: 750px) {
          width: 64px;
        }
      }
    }
    
    .videoPlayer__overlay {
      .theme-2020 & {
        background-color: rgba(#000, .8);
      }
    }
    
    .video-ID,
    .video-url,
    .video-embed {
      display: none;
    }
    
  • URL: /components/raw/video-player/video-player.scss
  • Filesystem Path: ../src/02_atoms/video-player/video-player.scss
  • Size: 885 Bytes

No notes defined.