HIDA - Helmholtz Information and Data Science Academy

Stage Video 

<!-- Stage Video -->
<div class="stage-video">
    <div class="stage-video__video">
        <div class="stage-video__video__inner"><video class="stage-video__video__inner__video" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
                <source src="../images/content/video1.m4v" type="video/mp4" />
                <source src="../images/content/video1.webm" type="video/webm" /></video></div>
    </div>
    <div class="stage-video__content">
        <div class="stage-video__headline">
            <h1 class="headline headline--1">Data <br />Scientists <br />für die <br />Welt von <br />morgen</h1>
        </div>
        <div class="stage-video__cards"><a class="stage-video__card stage-video__card--blue-light" href="#">
                <div class="stage-video__card__inner">
                    <div class="stage-video__card__kicker"><svg class="icon icon--learning" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-learning"></use>
                        </svg></div>
                    <div class="stage-video__card__headline">
                        <h2 class="headline headline--4">Jetzt bewerben für das HIDA Trainee Netzwerk! Bewerbungsschluss ist am 15. März 2021!</h2>
                    </div>
                    <div class="stage-video__card__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-arrow-right"></use>
                        </svg></div>
                </div>
            </a><a class="stage-video__card" href="#">
                <div class="stage-video__card__inner">
                    <div class="stage-video__card__kicker"><svg class="icon icon--clock" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-clock"></use>
                        </svg><span class="stage-video__card__kicker__text">6.10. – 10.10.2021 · Online</span></div>
                    <div class="stage-video__card__headline">
                        <h2 class="headline headline--4">Helmholtz virtual data science career day</h2>
                    </div>
                    <div class="stage-video__card__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-arrow-right"></use>
                        </svg></div>
                </div>
            </a></div>
    </div>
    <div class="stage-video__bottom"><button class="stage-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 class="stage-video__copyright">Video: Name / Agentur</div>
    </div>
</div>


<!-- Stage Video with image instead of video -->
<div class="stage-video stage-video--image">
    <div class="stage-video__image">
        <div class="stage-video__image__inner">
            <div class="image image--cover loading"><noscript><img class="image__fallback" alt="Alternativ-Text" width="1440" height="650" id="210" src="../images/content/stage-detail-1440x650.jpg" /></noscript><img class="image__img js-lazyload" alt="Alternativ-Text" width="1440" height="650" id="210" data-src="../images/content/stage-detail-1440x650.jpg" /></div>
        </div>
    </div>
    <div class="stage-video__content">
        <div class="stage-video__headline">
            <h1 class="headline headline--1">Data <br />Scientists <br />für die <br />Welt von <br />morgen</h1>
        </div>
        <div class="stage-video__cards"><a class="stage-video__card stage-video__card--blue-light" href="#">
                <div class="stage-video__card__inner">
                    <div class="stage-video__card__kicker"><svg class="icon icon--learning" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-learning"></use>
                        </svg></div>
                    <div class="stage-video__card__headline">
                        <h2 class="headline headline--4">Jetzt bewerben für das HIDA Trainee Netzwerk! Bewerbungsschluss ist am 15. März 2021!</h2>
                    </div>
                    <div class="stage-video__card__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-arrow-right"></use>
                        </svg></div>
                </div>
            </a><a class="stage-video__card" href="#">
                <div class="stage-video__card__inner">
                    <div class="stage-video__card__kicker"><svg class="icon icon--clock" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-clock"></use>
                        </svg><span class="stage-video__card__kicker__text">6.10. – 10.10.2021 · Online</span></div>
                    <div class="stage-video__card__headline">
                        <h2 class="headline headline--4">Helmholtz virtual data science career day</h2>
                    </div>
                    <div class="stage-video__card__icon"><svg class="icon icon--arrow-right" viewBox="0 0 200 200" role="presentation">
                            <use xlink:href="#icon-arrow-right"></use>
                        </svg></div>
                </div>
            </a></div>
    </div>
    <div class="stage-video__bottom">
        <div class="stage-video__copyright">Video: Name / Agentur</div>
    </div>
</div>


#{tag || 'div'}.stage-video(class=image && 'stage-video--image')&attributes(attr)
  if video
    .stage-video__video
      .stage-video__video__inner
        video.stage-video__video__inner__video(playsinline autoplay muted loop)
          source(src=video.mp4 type='video/mp4')
          source(src=video.webm type='video/webm')
  if image
    .stage-video__image
      .stage-video__image__inner
        +include('@image--cover', image)
  .stage-video__content
    .stage-video__headline
      +include('@headline', headline)
    if cards
      .stage-video__cards
        each item in cards
          a.stage-video__card(href=item.href, class=item.blueLight && 'stage-video__card--blue-light')
            .stage-video__card__inner
              if item.kickerIcon || item.kicker
                .stage-video__card__kicker
                  if item.kickerIcon
                    +include('@icon', { icon: item.kickerIcon })
                  if item.kicker
                    span.stage-video__card__kicker__text #{item.kicker}
              if item.headline
                .stage-video__card__headline
                  +include('@headline--headline-4', { tag: 'h2',  text: item.headline })
              if item.icon
                .stage-video__card__icon
                  +include('@icon', { icon: item.icon })
  .stage-video__bottom
    if video
      button.stage-video__play(type='button', data-icon='pause')
        +include('@icon', { icon: 'pause-circle' })
        +include('@icon', { icon: 'play-circle' })
    if copyright
      .stage-video__copyright #{copyright}
 
/* Stage Video */
{
  "headline": {
    "text": "Data <br/>Scientists <br/>für die <br/>Welt von <br/>morgen"
  },
  "cards": [
    {
      "href": "#",
      "blueLight": true,
      "kickerIcon": "learning",
      "headline": "Jetzt bewerben für das HIDA Trainee Netzwerk! Bewerbungsschluss ist am 15. März 2021!",
      "icon": "arrow-right"
    },
    {
      "href": "#",
      "kickerIcon": "clock",
      "kicker": "6.10. – 10.10.2021 · Online",
      "headline": "Helmholtz virtual data science career day",
      "icon": "arrow-right"
    }
  ],
  "copyright": "Video: Name / Agentur",
  "video": {
    "mp4": "../images/content/video1.m4v",
    "webm": "../images/content/video1.webm"
  }
}


/* Stage Video with image instead of video */
{
  "headline": {
    "text": "Data <br/>Scientists <br/>für die <br/>Welt von <br/>morgen"
  },
  "cards": [
    {
      "href": "#",
      "blueLight": true,
      "kickerIcon": "learning",
      "headline": "Jetzt bewerben für das HIDA Trainee Netzwerk! Bewerbungsschluss ist am 15. März 2021!",
      "icon": "arrow-right"
    },
    {
      "href": "#",
      "kickerIcon": "clock",
      "kicker": "6.10. – 10.10.2021 · Online",
      "headline": "Helmholtz virtual data science career day",
      "icon": "arrow-right"
    }
  ],
  "copyright": "Video: Name / Agentur",
  "image": {
    "src": "../images/content/stage-detail-1440x650.jpg",
    "width": 1440,
    "height": 650,
    "alt": "Alternativ-Text",
    "cover": true
  }
}
  • Content: 
    document.querySelectorAll('.stage-video:not(.stage-video--image)').forEach((wrap) => {
  const video = wrap.querySelector('.stage-video__video__inner__video');
  const play = wrap.querySelector('.stage-video__play');

  // Play/Pause
  const playPauseVideo = () => {
    if (video.paused) {
      play.setAttribute('data-icon', 'pause');
      video.play();
    } else {
      play.setAttribute('data-icon', 'play');
      video.pause();
    }
  };
  play.addEventListener('click', playPauseVideo);
});
  • URL: /components/raw/stage-video/stage-video.js
  • Filesystem Path: src/components/organisms/stage-video/stage-video.js
  • Size: 503 Bytes
  • Content: 
    .stage-video {
  height: 100vh;
  position: relative;
  width: 100%;
  z-index: 0;

  @include mq($from: l) {
    height: 77rem;
  }
}

.stage-video__video {
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

.stage-video__video__inner {
  height: 100%;
  margin: 0 auto;
  max-width: 192rem;
}

.stage-video__video__inner__video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.stage-video,
.stage-video__video__inner__video {
  min-height: 99rem;

  @include mq($from: l) {
    min-height: 75rem;
  }

  @include mq($from: xl) {
    min-height: 82rem;
  }

  @include mq($from: xxl) {
    min-height: 85rem;
  }
}

.stage-video__image {
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

.stage-video__image__inner {
  height: 100vh;
  margin: 0 auto;
  max-width: 192rem;
  position: relative;
}

.stage-video__image .image {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.stage-video__content {
  height: 100%;
  position: relative;
}

.stage-video__headline {
  color: #fff;
  padding: 10rem 1.5rem 3rem;

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

  @include mq($from: l) {
    align-items: center;
    display: flex;
    height: 100%;
    padding: 3rem 0 0 2.6rem;
    width: 50%;
  }

  @include mq($from: xl) {
    padding: 10rem 0 0 8.4rem;
  }
}

.stage-video__headline .headline {
  font-size: 5.2rem;
  letter-spacing: -0.156rem;
  line-height: calc(5.3 / 5.2);

  @include mq($from: m) {
    font-size: 9rem;
    letter-spacing: -0.3rem;
    line-height: calc(9.5 / 9);
  }
}

.stage-video__cards {
  padding: 0 1.5rem;

  @include mq($from: m) {
    display: flex;
    padding: 5rem 3rem;
  }

  @include mq($from: l) {
    display: inline-block;
    padding: 0;
    position: absolute;
    right: 3rem;
    top: 52%;
    transform: translateY(-50%);
  }

  @include mq($from: xl) {
    right: 20rem;
    top: 57%;
  }

  @include mq($from: xxl) {
    top: 55%;
  }
}

.stage-video__card {
  display: block;
  padding: 2rem;
  position: relative;
  transition: color 0.2s;
  z-index: 1;

  &::before,
  &::after {
    content: '';
    left: 0;
    position: absolute;
    width: 100%;
  }

  &::before {
    background: #fff;
    height: calc(100% - 4.8rem);
    top: 0;
  }

  &::after {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80"><defs/><path fill="' + #fff + '" d="M0 80V0h800v-40h800V-.09a40 40 0 0 1-11.75 28.32l-40.2 40.09A40 40 0 0 1 1519.82 80H0z"/></svg>');
    background-position: right bottom;
    background-size: auto 100%;
    bottom: 0;
    content: '';
    height: 5rem;
  }

  @media(hover: hover) and (pointer: fine) {
    &:hover {
      color: $color-blue;
    }
  }

  @include mq($until: l) {
    max-width: 34.5rem;
    width: 100%;
  }

  @include mq($from: m) {
    width: 50%;
  }

  @include mq($from: l) {
    width: 28.4rem;
  }
}

.stage-video__card + .stage-video__card {
  margin: 4rem 0 0;

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

  @include mq($from: l) {
    margin: 4rem 0 0;
  }
}

.stage-video__card--blue-light {
  color: #fff;

  &::before {
    background: $color-blue-light;
  }

  &::after {
    background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80"><defs/><path fill="' + $color-blue-light + '" d="M0 80V0h800v-40h800V-.09a40 40 0 0 1-11.75 28.32l-40.2 40.09A40 40 0 0 1 1519.82 80H0z"/></svg>');
  }

  @media(hover: hover) and (pointer: fine) {
    &:hover {
      color: #fff;
    }
  }
}

.stage-video__card__inner {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  position: relative;
  z-index: 1;
}

.stage-video__card__kicker {
  flex-grow: 1;
  padding-bottom: 0.5rem;
}

.stage-video__card__kicker .icon {
  color: $color-blue;
  font-size: 1.8rem;
  margin-right: 0.8rem;
  position: relative;
  top: -0.1rem;
}

.stage-video__card__kicker__text {
  color: $color-blue;
  font-family: $font-family-secondary;
  font-size: 1.5rem;
  font-weight: $font-weight-bold;
  text-transform: uppercase;
}

.stage-video__card__icon .icon {
  color: $color-blue;
  font-size: 1.4rem;
  transition: color 0.2s;
}

@media(hover: hover) and (pointer: fine) {
  .stage-video__card--blue-light:hover .stage-video__card__icon .icon {
    color: #fff;
  }
}

.stage-video__bottom {
  bottom: 1.5rem;
  position: absolute;
  right: 1.5rem;
  text-align: right;
}

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

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

.stage-video__copyright {
  color: #fff;
  font-size: 1.5rem;
  line-height: calc(2 / 1.5);
  padding-top: 1.5rem;
}
  • URL: /components/raw/stage-video/stage-video.scss
  • Filesystem Path: src/components/organisms/stage-video/stage-video.scss
  • Size: 4.8 KB

There are no notes for this item.