Component Library

Video Embed 

<div class="video-embed">
    <div class="video-embed__media-wrap">
        <img src="../../img/IMG-Inline_Center_FPO.jpg" alt="" />
        <div class="video-embed__video" aria-label="YouTube Video: Your future starts now." data-vid="LjOmcZkXVcU"></div>
    </div>
    <div class="video-embed__caption">Video caption lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
 
<div class="video-embed">
  <div class="video-embed__media-wrap">
    {% if wallpaper %}
    <img src="{{ wallpaper|path }}" alt="" />
    {% else %}
      {% if source == "youtube" %}
      <img src="https://img.youtube.com/vi/{{ youtube_video_id }}/maxresdefault.jpg" alt="Video Poster">
      {% elseif source == "vimeo" %}
      <img src="https://vumbnail.com/{{ vimeo_video_id }}.jpg" alt="Video Poster">
      {% endif %}
    {% endif %}
    {% if source == "youtube" %}
      <div class="video-embed__video" aria-label="YouTube Video: {{ title }}" data-vid="{{ youtube_video_id }}"></div>
    {% elseif source == "vimeo" %}
      <div data-vimeo-id="{{ vimeo_video_id }}" class="video--vim"></div>
    {% endif %}
  </div>
  {% if caption %}
    <div class="video-embed__caption">{{ caption }}</div>
  {% endif %}
</div>
 
{
  "wallpaper": "../../img/IMG-Inline_Center_FPO.jpg",
  "source": "youtube",
  "title": "Your future starts now.",
  "youtube_video_id": "LjOmcZkXVcU",
  "vimeo_video_id": "",
  "caption": "Video caption lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
}
  • Content: 
    .paragraph-widget--video-embed {
  @extend %extended-component-width;
}

.video-embed__media-wrap {
  z-index: 1;
  @extend %responsive-img;

  &:before {
    padding-top: 56.125%;
  }
  // yellow square for hover
  &:after {
    content: "";
    background-color: $iastate-gold;
    position: absolute;
    top: rem(-8);
    bottom: rem(-8);
    pointer-events: none;
    left: rem(-8);
    right: rem(-8);
    transition: 0.2s opacity ease-in-out;
    opacity: 0;
    z-index: -1;
  }
  img {
    transition: 0.2s opacity ease-in-out;
    z-index: 1;
  }

  iframe {
    transition: 0.2s opacity ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  &.video-playing {
    img {
      opacity: 0;
      z-index: 0;
    }
    iframe {
      opacity: 1;
    }
    .video-embed__button {
      opacity: 0;
    }
    .video-embed__video {
      pointer-events: all;
    }
  }
  &.video-embed__video-hover {
    &:after {
      opacity: 1;
    }
  }
}

.video-embed__video {
  pointer-events: none;
}

.video-embed__button {
  z-index: 5;
  cursor: pointer;
  width: rem(60);
  height: rem(60);
  margin-top: rem(-30);
  margin-left: rem(-30);
  position: absolute;
  top: 50%;
  left: 50%;
  border: none;
  background-color: transparent;
  padding: 0;
  @include media-breakpoint-up(lg) {
    width: rem(80);
    height: rem(80);
    margin-top: rem(-40);
    margin-left: rem(-40);
  }
  .video-play-icon {
    width: auto;
    .outer-circle g {
      transition: 0.2s opacity ease-in-out;
    }
    .arrow {
      transition: 0.2s fill ease-in-out;
    }
  }
  &:hover {
    .video-play-icon {
      .outer-circle g {
        opacity: 1;
      }
      .arrow {
        fill: $iastate-maroon;
      }
    }
  }
}

.video-embed__caption {
  margin-top: rem(10);
  @extend %caption;
  @include media-breakpoint-up(md) {
    padding-left: rem(53);
    padding-right: rem(53);
  }
  @include media-breakpoint-up(lg) {
    padding-left: rem(106);
    padding-right: rem(106);
    margin-top: rem(12);
    line-height: (26 / 14);
  }
}
  • URL: /components/raw/video-embed/_video-embed.scss
  • Filesystem Path: src/components/video-embed/_video-embed.scss
  • Size: 2.1 KB

Video Embed

This is a custom component (no class prefix in place as it does not conflict with bootstrap)

  • The component allows for use of either a YouTube or Vimeo video called by using the appropriate video ID and selecting a service in the config. If no wallpaper image is supplied, the default wallpaper image from either YouTube or Vimeo will be displayed. When the play button is clicked, the wallpaper image disappears and the video begins playing
  • The wallpaper and caption fields are optional
  • The custom styles are imported into the index.scss file as @import "../components/video-embed/video-embed";
  • There is a paragraph-widget wrapper for use in page context <div class="paragraph-widget paragraph-widget--video-embed">.
  • The .ts file for the javascript is imported into the index.ts file as import videoEmbedInit from "./components/video-embed"; and called as videoEmbedInit();