PDJ Brandbox

video-player: with youtube ID 

<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>
 
image:
  src:
    mobile: /graphics/video-player-mobile.jpg
    desktop: /graphics/video-player.jpg
  alt: ''
video:
  id: agkb5TSjEmc
  • 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.