@e-fellows/website-2022

Externes Video: Landscape 

<div class="external-video">
    <template class="external-video__code"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/PG8TPBfN0-s" title="YouTube-Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></template>

    <div class="external-video__content">
        <div class="external-video__preview" style="padding-top: 56.25%;">
            <img class="external-video__preview-image" src="https://i.ytimg.com/vi/PG8TPBfN0-s/hqdefault.jpg" width="560" height="560" alt="" role="presentation" lazy="lazy">

            <div class="external-video__overlay has-overlay-link">
                <p class="external-video__overlay-title">
                    <span class="u-line-clamp">Max. zweizeiliger Videotitel mit ca. 100 Zeichen, der automatisch von Youtube/Vimeo gezogen wird</span>
                </p>

                <div class="external-video__overlay-footer">
                    <div class="external-video__overlay-text">
                        Bei Klick auf dieses Video wird eine Verbindung zu YouTube aufgebaut. Weitere Informationen findest Du in unserer <a class="link link--internal" href="#"><span class="link__text u-underline">Datenschutzerklärung</span></a>.
                    </div>

                    <button class="icon-button u-overlay-link external-video__overlay-button" type="button" title="Video abspielen">
                        <span class="icon-button__icon">
                            <svg class="icon icon--play" viewBox="0 0 200 200" aria-hidden="true">
                                <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#play"></use>
                            </svg> </span>

                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
 
{% set width = width ?? false %}
{% set height = height ?? false %}
{% set caption = caption ?? false -%}

<div {{ html_attributes({
  class: {
    'external-video': true,
    'external-video--short': short ?? false,
  },
  id: id ?? false,
}, attrs ?? {}) }}>
  <template class="external-video__code">{{ content | raw }}</template>

  <div class="external-video__content">
    <div {{ html_attributes({
      class: 'external-video__preview',
      style: width and height ? "padding-top: #{height / width * 100}%;"
    }) }}>
      {% if preview|default %}
        <img {{ html_attributes({
          class: 'external-video__preview-image',
          src: preview,
          width: width,
          height: width,
          alt: '',
          role: 'presentation',
          lazy: 'lazy',
        }) }}>
      {% endif %}

      <div class="external-video__overlay has-overlay-link">
        {% if title|default %}
          <p class="external-video__overlay-title">
            <span class="u-line-clamp">{{ title }}</span>
          </p>
        {% endif %}

        <div class="external-video__overlay-footer">
          {% if provider|default and privacyLink|default %}
            <div class="external-video__overlay-text">
              {{ 'By clicking on this video, data will be transmitted to {provider}. For more information be please visit our <a href="{link}">privacy policy</a>' | t('site', {
                provider: provider,
                link: privacyLink,
              }) | componentize }}
            </div>
          {% endif %}

          {% include '@icon-button' with {
            attrs: { class: 'external-video__overlay-button' },
            icon: 'play',
            title: 'Play video' | t('site'),
            overlay: true,
          } only %}
        </div>
      </div>
    </div>
  </div>
</div>
 
{
  "width": 560,
  "height": 315,
  "content": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube-nocookie.com/embed/PG8TPBfN0-s\" title=\"YouTube-Video\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
  "preview": "https://i.ytimg.com/vi/PG8TPBfN0-s/hqdefault.jpg",
  "title": "Max. zweizeiliger Videotitel mit ca. 100 Zeichen, der automatisch von Youtube/Vimeo gezogen wird",
  "provider": "YouTube",
  "privacyLink": "#"
}
  • Content: 
    .external-video--short {
  margin-inline: auto;
  max-inline-size: 32.5rem;
}

.external-video__content {
  block-size: 100%;
  position: relative;

  :is(.tiktok-embed) {
    margin: 0 !important;
  }

  :is(.instagram-media) {
    block-size: 100%;
    border-radius: 0 !important;
    inline-size: 100%;
    inset: 0;
    margin: 0 !important;
    position: absolute;
  }

  :is(.tiktok-embed iframe) {
    aspect-ratio: 9 / 16;
    block-size: auto !important;
  }
}

.external-video__iframe {
  block-size: 100%;
  inline-size: 100%;
  inset: 0;
  position: absolute;
  z-index: 1;
}

.external-video__preview {
  overflow: hidden;
  position: relative;
}

.external-video__preview--hidden {
  display: none;
}

.external-video__preview-image {
  block-size: 100%;
  filter: blur(2px);
  inline-size: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  z-index: 1;

  @include mq($from: m) {
    filter: blur(4px);
  }
}

.external-video__overlay {
  --link-color: var(--color-white);
  --link-hover-color: var(--color-white);
  --link-underline-focus-color: transparent;

  background-image: linear-gradient(0deg, #000 0%, transparent 33%, transparent 67%, #000 100%);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  inset: 0;
  padding: 2rem;
  position: absolute;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
  z-index: 2;
}

.external-video__overlay-title {
  --line-clamp: 2;

  font-weight: bold;
  line-height: 1.3;

  @include use-responsive-sizing(font-size, responsive-map(xs 1.4rem, xl 2.6rem));
}

.external-video__overlay-footer {
  align-items: flex-end;
  block-size: 100%;
  display: flex;
  grid-gap: 4rem;
  inline-size: 100%;
  justify-content: space-between;
}

.external-video__overlay-text {
  align-self: flex-end;
  font-size: 1.3rem;
  line-height: 1.3;
}

.external-video__overlay-button {
  --icon-button-text-color: #fff;
}
  • URL: /components/raw/external-video/external-video.scss
  • Filesystem Path: src/components/2-molecules/external-video/external-video.scss
  • Size: 1.9 KB
  • Content: 
    import { on } from 'delegated-events';

on('click', 'button.external-video__overlay-button', (event) => {
  event.preventDefault();

  // Get container
  const { currentTarget: $button } = event;
  const $embed = $button.closest<HTMLElement>('.external-video');
  const $code = $embed?.querySelector<HTMLTemplateElement>(
    '.external-video__code',
  );
  const $content = $embed?.querySelector<HTMLElement>(
    '.external-video__content',
  );

  if (!$code || !$content) {
    return;
  }

  // Delete preview
  $content
    .querySelector('.external-video__preview')
    ?.classList.add('external-video__preview--hidden');

  // Unpack template with content
  $content.appendChild($code.content.cloneNode(true));

  // Find iframe
  const $iframe = $content.querySelector<HTMLIFrameElement>('iframe');

  if ($iframe) {
    const { width, height } = $iframe;
    const ratio = (parseInt(height, 10) / parseInt(width, 10)) * 100;

    $iframe.classList.add('external-video__iframe');
    $content.style.paddingTop = `${ratio}%`;
  }
});

// eslint-disable-next-line import/prefer-default-export
export const destroyExternalVideo = ($externalVideo: HTMLElement) => {
  // Remove all nodes except preview
  const $content = $externalVideo?.querySelector<HTMLElement>(
    '.external-video__content',
  );

  if ($content) {
    [...$content.children].forEach(($child) => {
      if (
        $child instanceof HTMLElement &&
        !$child.matches('.external-video__preview')
      ) {
        $child.remove();
      }
    });
    $content.style.paddingTop = '';
  }

  // Restore preview
  $externalVideo
    .querySelector('.external-video__preview')
    ?.classList.remove('external-video__preview--hidden');
};
  • URL: /components/raw/external-video/external-video.ts
  • Filesystem Path: src/components/2-molecules/external-video/external-video.ts
  • Size: 1.7 KB

No notes defined.