@e-fellows/website-2022

Video-Galerie 

<div id="video-gallery-81775-66067" class="video-gallery">
    <div class="video-gallery__videos">
        <div id="video-gallery-81775-66067-video-1" class="video-gallery__video" role="tabpanel" aria-hidden="false" data-tab-id="video-gallery-81775-66067-video-tab-1">
            <div class="external-video" id="video-gallery-81775-66067-video-1-component">
                <template class="external-video__code"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Z6_6tXajXm4" 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/Z6_6tXajXm4/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">Welche Stipendiumsleistungen von e-fellows.net nutzt du?</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>
        </div>
        <div id="video-gallery-81775-66067-video-2" class="video-gallery__video" role="tabpanel" aria-hidden="true" data-tab-id="video-gallery-81775-66067-video-tab-2">
            <div class="external-video" id="video-gallery-81775-66067-video-2-component">
                <template class="external-video__code"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/oxGQOF3AQJE" 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/oxGQOF3AQJE/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">Wir haben die e-fellows gefragt, was ihre Lieblings-Stipendiumsleistung ist ...</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>
        </div>
        <div id="video-gallery-81775-66067-video-3" class="video-gallery__video" role="tabpanel" aria-hidden="true" data-tab-id="video-gallery-81775-66067-video-tab-3">
            <div class="external-video" id="video-gallery-81775-66067-video-3-component">
                <template class="external-video__code"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/6WekSGERlVY" 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/6WekSGERlVY/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">e-fellows.net Karrieretag für Ingenieure</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>
        </div>
        <div id="video-gallery-81775-66067-video-4" class="video-gallery__video" role="tabpanel" aria-hidden="true" data-tab-id="video-gallery-81775-66067-video-tab-4">
            <div class="external-video" id="video-gallery-81775-66067-video-4-component">
                <template class="external-video__code"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/k4gLyYLW0FE" 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/k4gLyYLW0FE/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">e-fellows.net Perspektive Wirtschaftskanzlei</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>
        </div>
        <div id="video-gallery-81775-66067-video-5" class="video-gallery__video" role="tabpanel" aria-hidden="true" data-tab-id="video-gallery-81775-66067-video-tab-5">
            <div class="external-video" id="video-gallery-81775-66067-video-5-component">
                <template class="external-video__code"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Y3T3ZtcMMd8" 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/Y3T3ZtcMMd8/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">Webinar: &quot;Als MINT-Studentin in die IT eines Asset Managers - Dein Plan A, B oder C?&quot;</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>
        </div>
    </div>

    <div class="video-gallery__tabs-wrapper">
        <div class="video-gallery__tab-fadeout"></div>

        <ul class="video-gallery__tabs" role="tablist">
            <li class="video-gallery__tab" role="presentation">
                <a href="#video-gallery-81775-66067-video-1" id="video-gallery-81775-66067-video-tab-1" class="video-gallery__tab-link" role="tab" aria-selected="true">
                    <div class="video-gallery__tab-image">
                        <picture class="image image--cover">
                            <img class="image__img" src="https://i.ytimg.com/vi/Z6_6tXajXm4/hqdefault.jpg" width="560" height="315" alt="" loading="lazy" role="presentation" />
                        </picture>

                        <div class="video-gallery__tab-play">
                            <svg class="icon icon--play" viewBox="0 0 200 200" aria-hidden="true">
                                <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#play"></use>
                            </svg>
                        </div>
                    </div>

                    <div class="video-gallery__tab-title u-underline">Welche Stipendiumsleistungen von e-fellows.net nutzt du?</div>
                </a>
            </li>
            <li class="video-gallery__tab" role="presentation">
                <a href="#video-gallery-81775-66067-video-2" id="video-gallery-81775-66067-video-tab-2" class="video-gallery__tab-link" role="tab">
                    <div class="video-gallery__tab-image">
                        <picture class="image image--cover">
                            <img class="image__img" src="https://i.ytimg.com/vi/oxGQOF3AQJE/hqdefault.jpg" width="560" height="315" alt="" loading="lazy" role="presentation" />
                        </picture>

                        <div class="video-gallery__tab-play">
                            <svg class="icon icon--play" viewBox="0 0 200 200" aria-hidden="true">
                                <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#play"></use>
                            </svg>
                        </div>
                    </div>

                    <div class="video-gallery__tab-title u-underline">Wir haben die e-fellows gefragt, was ihre Lieblings-Stipendiumsleistung ist ...</div>
                </a>
            </li>
            <li class="video-gallery__tab" role="presentation">
                <a href="#video-gallery-81775-66067-video-3" id="video-gallery-81775-66067-video-tab-3" class="video-gallery__tab-link" role="tab">
                    <div class="video-gallery__tab-image">
                        <picture class="image image--cover">
                            <img class="image__img" src="https://i.ytimg.com/vi/6WekSGERlVY/hqdefault.jpg" width="560" height="315" alt="" loading="lazy" role="presentation" />
                        </picture>

                        <div class="video-gallery__tab-play">
                            <svg class="icon icon--play" viewBox="0 0 200 200" aria-hidden="true">
                                <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#play"></use>
                            </svg>
                        </div>
                    </div>

                    <div class="video-gallery__tab-title u-underline">e-fellows.net Karrieretag für Ingenieure</div>
                </a>
            </li>
            <li class="video-gallery__tab" role="presentation">
                <a href="#video-gallery-81775-66067-video-4" id="video-gallery-81775-66067-video-tab-4" class="video-gallery__tab-link" role="tab">
                    <div class="video-gallery__tab-image">
                        <picture class="image image--cover">
                            <img class="image__img" src="https://i.ytimg.com/vi/k4gLyYLW0FE/hqdefault.jpg" width="560" height="315" alt="" loading="lazy" role="presentation" />
                        </picture>

                        <div class="video-gallery__tab-play">
                            <svg class="icon icon--play" viewBox="0 0 200 200" aria-hidden="true">
                                <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#play"></use>
                            </svg>
                        </div>
                    </div>

                    <div class="video-gallery__tab-title u-underline">e-fellows.net Perspektive Wirtschaftskanzlei</div>
                </a>
            </li>
            <li class="video-gallery__tab" role="presentation">
                <a href="#video-gallery-81775-66067-video-5" id="video-gallery-81775-66067-video-tab-5" class="video-gallery__tab-link" role="tab">
                    <div class="video-gallery__tab-image">
                        <picture class="image image--cover">
                            <img class="image__img" src="https://i.ytimg.com/vi/Y3T3ZtcMMd8/hqdefault.jpg" width="560" height="315" alt="" loading="lazy" role="presentation" />
                        </picture>

                        <div class="video-gallery__tab-play">
                            <svg class="icon icon--play" viewBox="0 0 200 200" aria-hidden="true">
                                <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#play"></use>
                            </svg>
                        </div>
                    </div>

                    <div class="video-gallery__tab-title u-underline">Webinar: &quot;Als MINT-Studentin in die IT eines Asset Managers - Dein Plan A, B oder C?&quot;</div>
                </a>
            </li>
        </ul>

        <div class="video-gallery__tab-fadeout"></div>
    </div>
</div>
 
{% set id = id ??? html_id('video-gallery') -%}

<div {{ html_attributes({
  id: id,
  class: 'video-gallery',
}) }}>
  <div class="video-gallery__videos">
    {% for video in videos %}
      <div {{ html_attributes({
        id: "video-#{loop.index}" | namespaceInputId(id),
        class: 'video-gallery__video',
        role: 'tabpanel',
        'aria-hidden': loop.index == 1 ? 'false' : 'true',
        'data-tab-id': "video-tab-#{loop.index}" | namespaceInputId(id),
      }) }}>
        {% include '@external-video' with video | merge({
          id: "video-#{loop.index}-component" | namespaceInputId(id),
        }) only %}
      </div>
    {% endfor %}
  </div>

  <div class="video-gallery__tabs-wrapper">
    <div class="video-gallery__tab-fadeout"></div>

    <ul class="video-gallery__tabs" role="tablist">
      {% for video in videos %}
        <li class="video-gallery__tab" role="presentation">
          <a {{ html_attributes({
            href: '#' ~ ("video-#{loop.index}" | namespaceInputId(id)),
            id: "video-tab-#{loop.index}" | namespaceInputId(id),
            class: 'video-gallery__tab-link',
            role: 'tab',
            'aria-selected': loop.index == 1 ? 'true',
          }) }}>
            <div class="video-gallery__tab-image">
              {% include '@image' with {
                src: video.preview,
                width: video.width,
                height: video.height,
                decorative: true,
                cover: true,
              } only %}

              <div class="video-gallery__tab-play">
                {% include '@icon' with {
                  icon: 'play',
                } only %}
              </div>
            </div>

            <div class="video-gallery__tab-title u-underline">
              {{- video.title -}}
            </div>
          </a>
        </li>
      {% endfor %}
    </ul>

    <div class="video-gallery__tab-fadeout"></div>
  </div>
</div>
 
{
  "videos": [
    {
      "width": 560,
      "height": 315,
      "content": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube-nocookie.com/embed/Z6_6tXajXm4\" title=\"YouTube-Video\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
      "preview": "https://i.ytimg.com/vi/Z6_6tXajXm4/hqdefault.jpg",
      "title": "Welche Stipendiumsleistungen von e-fellows.net nutzt du?",
      "provider": "YouTube",
      "privacyLink": "#"
    },
    {
      "width": 560,
      "height": 315,
      "content": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube-nocookie.com/embed/oxGQOF3AQJE\" title=\"YouTube-Video\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
      "preview": "https://i.ytimg.com/vi/oxGQOF3AQJE/hqdefault.jpg",
      "title": "Wir haben die e-fellows gefragt, was ihre Lieblings-Stipendiumsleistung ist ...",
      "provider": "YouTube",
      "privacyLink": "#"
    },
    {
      "width": 560,
      "height": 315,
      "content": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube-nocookie.com/embed/6WekSGERlVY\" title=\"YouTube-Video\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
      "preview": "https://i.ytimg.com/vi/6WekSGERlVY/hqdefault.jpg",
      "title": "e-fellows.net Karrieretag für Ingenieure",
      "provider": "YouTube",
      "privacyLink": "#"
    },
    {
      "width": 560,
      "height": 315,
      "content": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube-nocookie.com/embed/k4gLyYLW0FE\" title=\"YouTube-Video\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
      "preview": "https://i.ytimg.com/vi/k4gLyYLW0FE/hqdefault.jpg",
      "title": "e-fellows.net Perspektive Wirtschaftskanzlei",
      "provider": "YouTube",
      "privacyLink": "#"
    },
    {
      "width": 560,
      "height": 315,
      "content": "<iframe width=\"560\" height=\"315\" src=\"https://www.youtube-nocookie.com/embed/Y3T3ZtcMMd8\" title=\"YouTube-Video\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
      "preview": "https://i.ytimg.com/vi/Y3T3ZtcMMd8/hqdefault.jpg",
      "title": "Webinar: \"Als MINT-Studentin in die IT eines Asset Managers - Dein Plan A, B oder C?\"",
      "provider": "YouTube",
      "privacyLink": "#"
    }
  ]
}
  • Content: 
    :root {
  --video-gallery-column-width: 25%;
}

.video-gallery {
  @include use-responsive-sizing(gap, $gaps);

  @include mq($from: l) {
    display: flex;
  }
}

.video-gallery__videos {
  flex-grow: 1;
  flex-shrink: 0;
}

.video-gallery__video {
  &[aria-hidden='true'] {
    display: none;
  }
}

.video-gallery__tabs-wrapper {
  --video-gallery-inline-margin: calc(var(--body-padding) * -1);

  position: relative;

  @include mq($from: l) {
    inline-size: var(--video-gallery-column-width);
  }
}

.video-gallery__tabs {
  align-items: stretch;
  display: flex;
  margin-inline: var(--video-gallery-inline-margin);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2rem;
  position: relative;

  @include mq($from: l) {
    flex-direction: column;
    flex-shrink: 0;
    inset: 0;
    margin-block: -2rem;
    margin-inline: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
  }
}

.video-gallery__tab {
  display: block;
  flex-shrink: 0;
  inline-size: 60%;
  max-inline-size: 25rem;
  position: relative;
  z-index: 1;

  & + & {
    margin-inline-start: 2rem;
  }

  @include mq($from: l) {
    inline-size: 100%;
    max-inline-size: none;

    & + & {
      margin-block-start: 2rem;
      margin-inline-start: 0;
    }
  }
}

.video-gallery__tab-fadeout {
  --video-gallery-tab-fadeout-direction: 90deg;

  inline-size: 2rem;
  inset-block: 0;
  position: absolute;
  z-index: 2;

  &:first-child {
    background-image: linear-gradient(var(--video-gallery-tab-fadeout-direction), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    inset-inline-start: var(--video-gallery-inline-margin);
  }

  &:last-child {
    background-image: linear-gradient(var(--video-gallery-tab-fadeout-direction), rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    inset-inline-end: var(--video-gallery-inline-margin);
  }

  @include mq($from: l) {
    --video-gallery-tab-fadeout-direction: 180deg;

    block-size: 2rem;
    inline-size: 100%;

    &:first-child {
      inset-block-end: auto;
      inset-block-start: -2rem;
      inset-inline: 0;
    }

    &:last-child {
      inset-block-end: -2rem;
      inset-block-start: auto;
      inset-inline: 0;
    }
  }
}

.video-gallery__tab-link {
  --video-gallery-tab-play-background-color: var(--color-orange);

  display: block;
  transition-property: opacity;

  &:is(:hover:not([disabled]), :focus:not(.has-invisible-focus)) {
    --video-gallery-tab-play-background-color: var(--color-white);
  }

  &:is([aria-selected='true']) {
    opacity: 0.5;
    pointer-events: none;
  }
}

.video-gallery__tab-image {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  position: relative;
}

.video-gallery__tab-play {
  align-items: center;
  background-color: var(--video-gallery-tab-play-background-color);
  block-size: 3rem;
  border: 2px solid var(--color-orange);
  color: var(--color-midnight);
  display: flex;
  font-size: 1.4rem;
  inline-size: 3rem;
  inset-block-end: 2rem;
  inset-inline-end: 2rem;
  justify-content: center;
  line-height: 0;
  position: absolute;
  transition-property: background-color;
  z-index: 3;
}

.video-gallery__tab-title {
  font-size: 1.4rem;
  line-height: var(--line-height-body);
  margin-block-start: 1.2rem;
}
  • URL: /components/raw/video-gallery/video-gallery.scss
  • Filesystem Path: src/components/3-organisms/video-gallery/video-gallery.scss
  • Size: 3.3 KB
  • Content: 
    import { on } from 'delegated-events';
import invisibleFocus from '../../../javascripts/utils/invisibleFocus';
import { destroyExternalVideo } from '../../2-molecules/external-video/external-video';

const switchTab = ($oldTab: HTMLAnchorElement, $newTab: HTMLAnchorElement) => {
  // Focus to new tab
  invisibleFocus($newTab);

  // Set the selected state
  $newTab.setAttribute('aria-selected', 'true');
  $oldTab.removeAttribute('aria-selected');

  // Hide old panel
  const $oldPanel = document.getElementById($oldTab.hash.slice(1));
  $oldPanel?.setAttribute('aria-hidden', 'true');

  // Destroy external video
  const $externalVideo =
    $oldPanel?.querySelector<HTMLElement>('.external-video');
  if ($externalVideo) {
    destroyExternalVideo($externalVideo);
  }

  // Show old panel
  const $newPanel = document.getElementById($newTab.hash.slice(1));
  $newPanel?.setAttribute('aria-hidden', 'false');
};

on('click', 'a.video-gallery__tab-link', (event) => {
  const { currentTarget: $tab } = event;

  event.preventDefault();

  const $currentTab = $tab
    .closest('.video-gallery__tabs')
    ?.querySelector<HTMLAnchorElement>('[aria-selected]');

  if ($currentTab && $tab !== $currentTab) {
    switchTab($currentTab, $tab);
  }
});
  • URL: /components/raw/video-gallery/video-gallery.ts
  • Filesystem Path: src/components/3-organisms/video-gallery/video-gallery.ts
  • Size: 1.3 KB

No notes defined.