HIDA - Helmholtz Information and Data Science Academy

Section Video: Section with background video and youtube overlay 

<div class="section-video section-video--overlay">
    <div class="section-video__video">
        <div class="parallax-video"><video class="parallax-video__video" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
                <source src="../images/content/video2.m4v" type="video/mp4" />
                <source src="../images/content/video2.webm" type="video/webm" /></video></div>
    </div>
    <div class="section-video__body">
        <div class="section-video__text-wrapper">
            <div class="section-video__headline"><span class="headline-kicker">Optionale Spitzmarke<span class="u-hidden-visually">: </span></span>
                <h1 class="headline headline--module-1">6 Data Science Schools, <br />17 Universitäten, <br />14 Forschungszentren</h1>
            </div>
            <div class="section-video__text">
                <p class="large">HIDA ist Drehscheibe für datenwissenschaftliche Aus- und Weiterbildung in den Forschungsbereichen Energie, Erde und Umwelt, Gesundheit, Raum und Verkehr, Luftfahrt sowie Materie. Mit weltweiten Partnern aus Wissenschaft und Industrie bauen wir ein globales Netzwerk.</p>
            </div>
            <div class="section-video__button"><button class="button button--primary js-open-video-overlay" type="button"><span class="button__inner"><svg class="icon icon--play" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-play"></use>
                        </svg><span class="button__text">Play Video</span></span></button></div>
        </div>
        <div class="section-video__bottom"><button class="section-video__play" type="button" data-icon="pause"><svg class="icon icon--pause-circle" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-pause-circle"></use>
                </svg><svg class="icon icon--play-circle" viewBox="0 0 200 200" role="presentation">
                    <use xlink:href="#icon-play-circle"></use>
                </svg></button></div>
    </div>
    <div class="section-video__overlay">
        <div class="section-video__overlay__content">
            <figure class="figure" aria-labelledby="figure-3ab1f3-label">
                <div class="figure__video-wrapper"><iframe class="figure__video" src="https://www.youtube-nocookie.com/embed/K5VYIgub8y8?rel=0" allowFullscreen="allowFullscreen" msAllowFullscreen="msAllowFullscreen" webkitAllowFullscreen="webkitAllowFullscreen" mozAllowFullscreen="mozAllowFullscreen"></iframe></div>
            </figure>
        </div><button class="section-video__overlay__close"><svg class="icon icon--close" viewBox="0 0 200 200" role="presentation">
                <use xlink:href="#icon-close"></use>
            </svg></button>
    </div>
</div>
 
#{tag || 'div'}.section-video(
  class=classNames(
    figure && 'section-video--figure',
    overlay && 'section-video--overlay'
  )
)&attributes(attr)
  if parallaxVideo
    .section-video__video
      +include('@parallax--video')
  .section-video__body
    if figure
      .section-video__figure
        +include('@figure', figure)
    .section-video__text-wrapper
      if headline
        .section-video__headline
          +include('@headline--module-1', headline)
      if paragraph
        .section-video__text
          +include('@paragraph--large', paragraph)
      if button
        .section-video__button
          +include('@button', button)
    if parallaxVideo || figure.video
      .section-video__bottom
        button.section-video__play(type='button', data-icon='pause')
          +include('@icon', { icon: 'pause-circle' })
          +include('@icon', { icon: 'play-circle' })
  if overlay
    .section-video__overlay
      .section-video__overlay__content
        +include('@figure', overlayFigure)
      button.section-video__overlay__close
        +include('@icon', { icon: 'close' })
 
{
  "headline": {
    "kicker": "Optionale Spitzmarke",
    "text": "6 Data Science Schools, <br />17 Universitäten, <br />14 Forschungszentren"
  },
  "button": {
    "text": "Play Video",
    "icon": "play",
    "link": null,
    "attr": {
      "class": "js-open-video-overlay"
    }
  },
  "overlay": true,
  "parallaxVideo": true,
  "paragraph": {
    "text": "HIDA ist Drehscheibe für datenwissenschaftliche Aus- und Weiterbildung in den Forschungsbereichen Energie, Erde und Umwelt, Gesundheit, Raum und Verkehr, Luftfahrt sowie Materie. Mit weltweiten Partnern aus Wissenschaft und Industrie bauen wir ein globales Netzwerk."
  },
  "overlayFigure": {
    "copyright": null,
    "video": {
      "type": "external",
      "href": "https://www.youtube-nocookie.com/embed/K5VYIgub8y8?rel=0"
    }
  }
}
  • Content: 
    document.querySelectorAll('.section-video').forEach((wrap) => {
  const video = wrap.querySelector('.section-video video');
  const play = wrap.querySelector('.section-video__play');
  // Play/Pause
  const playPauseVideo = () => {
    if (video.paused) {
      play.setAttribute('data-icon', 'pause');
      video.play();
    } else {
      play.setAttribute('data-icon', 'play');
      video.pause();
    }
  };
  if (play) play.addEventListener('click', playPauseVideo);
});

// Video overlay
const bodyOverlayVisible = 'body--overlay-visible';
const overlayVisible = 'section-video__overlay--visible';
const videoButtons = document.querySelectorAll('.js-open-video-overlay');
const videoOverlays = document.querySelectorAll('.section-video__overlay');

if (videoButtons && videoOverlays) {
  const { body } = document;
  const closeButtons = document.querySelectorAll('.section-video__overlay__close');
  const overlayBodies = document.querySelectorAll('.section-video__overlay__content');

  videoButtons.forEach((button, index) => {
    const videoFrame = overlayBodies[index].querySelector('.figure__video');
    const videoSrc = videoFrame.src;
    videoFrame.src = '';

    button.addEventListener('click', (event) => {
      videoOverlays[index].classList.add(overlayVisible);
      body.classList.add(bodyOverlayVisible);

      if (!videoFrame.src || !videoFrame.src.includes(videoSrc)) {
        videoFrame.src = `${videoSrc}&autoplay=1`;
      }


      event.stopPropagation();
      return false;
    });

    closeButtons[index].addEventListener('click', () => {
      videoOverlays[index].classList.remove(overlayVisible);
      body.classList.remove(bodyOverlayVisible);
      videoFrame.src = '';
    });

    document.addEventListener('click', (event) => {
      const isClickInside = overlayBodies[index].contains(event.target);
      if (!isClickInside) {
        videoOverlays[index].classList.remove(overlayVisible);
        body.classList.remove(bodyOverlayVisible);

        videoFrame.src = '';
      }
    });
  });
}
  • URL: /components/raw/section-video/section-video.js
  • Filesystem Path: src/components/organisms/section-video/section-video.js
  • Size: 2 KB
  • Content: 
    .section-video {
  background-color: $color-dark;
  color: #fff;
  position: relative;
}

.section-video__video,
.section-video__video .parallax-video {
  bottom: 0;
  height: 100%;
  left: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.section-video__video .parallax-video__video {
  object-fit: cover;
}

.section-video__body {
  padding: 6rem 1.5rem 10rem;
  position: relative;
  z-index: 1;

  @include mq($from: m) {
    max-width: 86rem;
    padding: 10rem 3rem;
  }

  @include mq($from: xl) {
    max-width: inherit;
    padding: 16rem 9rem 16rem 50%;
  }
}

.section-video--overlay {
  &::before {
    background-color: rgba($color-dark, 0.5);
    content: '';
    position: absolute;
    z-index: 1;

    @include mq($until: xl) {
      bottom: 0;
      left: 0;
      top: 26rem;
      width: 100%;
    }

    @include mq($from: xl) {
      height: 100%;
      right: 0;
      top: 0;
      width: calc(40% + 9rem);
    }
  }

  .section-video__body {
    padding-top: 30rem;

    @include mq($from: xl) {
      padding: 16rem 9rem 16rem 60%;
    }
  }
}

.section-video--figure {
  .section-video__body {
    padding: 6rem 1.5rem 10rem;

    @include mq($from: m) {
      padding: 10rem 3rem;
    }

    @include mq($from: xl) {
      display: flex;
      flex-wrap: wrap;
      padding: 16rem 9rem;
    }
  }

  .section-video__figure {
    @include mq($until: xl) {
      margin-bottom: 5rem;
    }

    @include mq($from: xl) {
      padding-right: 4rem;
      width: 60%;
    }
  }

  .figure {
    @include mq($from: xl) {
      width: 100%;
    }
  }

  .section-video__text-wrapper {
    @include mq($from: xl) {
      padding-left: 4rem;
      width: 40%;
    }
  }

  .headline--module-1 {
    font-size: 3.4rem;
    letter-spacing: -0.15rem;
    line-height: calc(4 / 3.4);
  }
}

.section-video__text {
  margin-top: 2rem;

  @include mq($from: m) {
    margin-top: 2.5rem;
  }
}

.section-video__button {
  margin-top: 2.5rem;

  @include mq($from: m) {
    margin-top: 4rem;
  }
}

.section-video__bottom {
  bottom: 1.5rem;
  position: absolute;
  right: 1.5rem;
  text-align: right;
  z-index: 2;
}

.section-video__play,
.section-video__play .icon {
  color: #fff;
  height: 4rem;
  width: 4rem;
}

.section-video__play[data-icon='pause'] .icon--play-circle,
.section-video__play[data-icon='play'] .icon--pause-circle {
  display: none;
}

.section-video__overlay {
  background-color: $color-dark;
  bottom: 0;
  height: 100%;
  left: 0;
  opacity: 0;
  overflow-y: auto;
  padding: 10rem 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
  transition: opacity 0.2s;
  width: 100%;
  z-index: z('overlay');

  &--visible {
    opacity: 1;
    pointer-events: all;
  }

  &::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
}

.section-video__overlay__content {
  display: inline-block;
  max-width: 104.4rem;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-align: left;
  vertical-align: middle;
  width: calc(100% - 4rem);
  z-index: z('overlay');
}

.section-video__overlay__close {
  appearance: none;
  cursor: pointer;
  position: absolute;
  right: 2rem;
  top: 2rem;
  z-index: z('overlay');

  .icon {
    height: 4rem;
    width: 4rem;
  }
}
  • URL: /components/raw/section-video/section-video.scss
  • Filesystem Path: src/components/organisms/section-video/section-video.scss
  • Size: 3.3 KB

There are no notes for this item.