C-FMT-11: Full Width Video Row: No Caption

Ready

HTML
View
Context
Assets
Info
Notes


        
        <section class="full-width-video" aria-labelledby="fullWidthVideoHeading" data-module="fullWidthVideo">
    <figure class="full-width-video__wrapper">
        <section class="testimonials container scEnabledChrome" data-module="testimonials" sc-part-of="placeholder rendering">
            <header>
                <h2 class="testimonials__heading">
                    <span class="scChromeData"></span><span id="fld_77D47B44369D4ACE84D66C17A275811D_1D631840345E4DDEB0539099EA076EEE_en_1_e6929504dae7493c83cb7b24225421d3_292_edit" sc_parameters="prevent-line-break=true" contenteditable="true" class="scWebEditInput scEnabledChrome" scfieldtype="single-line text" scdefaulttext="[No text in field]" sc-part-of="field">Testimonial Carousel</span>
                </h2>
            </header>
            <div class="testimonials__slider">
                <div class="swiper-container swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
                    <div class="swiper-wrapper">
                        <span type="text/sitecore" sc-part-of="placeholder rendering" style="display: none;" class="scEnabledChrome"></span>
                        <div class="scEnabledChrome scEmptyPlaceholder" sc-placeholder-id="_Rows_TestimonialCarouselCards__C42E4A27_B288_4A35_82D6_BDF2B96BB2CA__0" sc-part-of="placeholder"></div><code type="text/sitecore" id="scEnclosingTag_" chrometype="placeholder" kind="close" hintname="TestimonialCarouselCards" class="scpm">
                    </div>
                </div>
            </div>
        </section>
        <div class="full-width-video__overlay">
            <button class="full-width-video__play-button">
                <svg aria-label="Play video">
                    <use xlink:href="#play-outline" />
                </svg>
            </button>
            <h2 class="full-width-video__heading" id="fullWidthVideoHeading">
                Take the virtual tour
            </h2>
        </div>
    </figure>
</section>

<section class="full-width-video" aria-labelledby="fullWidthVideoHeading" data-module="fullWidthVideo">
    <figure class="full-width-video__wrapper">
        <section class="testimonials container scEnabledChrome" data-module="testimonials" sc-part-of="placeholder rendering">
            <header>
                <h2 class="testimonials__heading">
                    <span class="scChromeData"></span><span id="fld_77D47B44369D4ACE84D66C17A275811D_1D631840345E4DDEB0539099EA076EEE_en_1_e6929504dae7493c83cb7b24225421d3_292_edit" sc_parameters="prevent-line-break=true" contenteditable="true" class="scWebEditInput scEnabledChrome" scfieldtype="single-line text" scdefaulttext="[No text in field]" sc-part-of="field">Testimonial Carousel</span>
                </h2>
            </header>
            <div class="testimonials__slider">
                <div class="swiper-container swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events">
                    <div class="swiper-wrapper">
                        <span type="text/sitecore" sc-part-of="placeholder rendering" style="display: none;" class="scEnabledChrome"></span>
                        <div class="scEnabledChrome scEmptyPlaceholder" sc-placeholder-id="_Rows_TestimonialCarouselCards__C42E4A27_B288_4A35_82D6_BDF2B96BB2CA__0" sc-part-of="placeholder"></div><code type="text/sitecore" id="scEnclosingTag_" chrometype="placeholder" kind="close" hintname="TestimonialCarouselCards" class="scpm">
                    </div>
                </div>
            </div>
        </section>
        <div class="full-width-video__overlay">
            <button class="full-width-video__play-button">
                <svg aria-label="Play video">
                    <use xlink:href="#play-outline" />
                </svg>
            </button>
            <h2 class="full-width-video__heading" id="fullWidthVideoHeading">
                Take the virtual tour
            </h2>
        </div>
    </figure>
</section>


        <section class="full-width-video"
aria-labelledby="fullWidthVideoHeading"
data-module="fullWidthVideo"
>
  <figure class="full-width-video__wrapper">
    {{>@video videoPlayer=videoPlayer videoId=videoId background=background poster=poster}}
    <div class="full-width-video__overlay">
        <button class="full-width-video__play-button">
          {{>svg name="play-outline" ariaLabel="Play video"}}
        </button>
        <h2 class="full-width-video__heading" id="fullWidthVideoHeading">
          {{heading}}
        </h2>
      </div>
  </figure>
  {{#if caption}}
    <p class="full-width-video__caption">
      {{caption}}
    </p>
  {{/if}}
</section>

<section class="full-width-video"
aria-labelledby="fullWidthVideoHeading"
data-module="fullWidthVideo"
>
  <figure class="full-width-video__wrapper">
    {{>@video videoPlayer=videoPlayer videoId=videoId background=background poster=poster}}
    <div class="full-width-video__overlay">
        <button class="full-width-video__play-button">
          {{>svg name="play-outline" ariaLabel="Play video"}}
        </button>
        <h2 class="full-width-video__heading" id="fullWidthVideoHeading">
          {{heading}}
        </h2>
      </div>
  </figure>
  {{#if caption}}
    <p class="full-width-video__caption">
      {{caption}}
    </p>
  {{/if}}
</section>


        
            
            {
  "heading": " Take the virtual tour",
  "videoId": "DSLgAsrcpGQ",
  "videoPlayer": "youtube",
  "background": true,
  "image": {
    "srcset": {
      "767": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=767&h=430",
      "1279": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=1280&h=717"
    },
    "src": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=790&h=444",
    "description": "Image Description"
  },
  "autoplay": false,
  "caption": null
}

File:

Content:


                                @import 'variables';

.full-width-video {
  margin: 0;

  @include mq($until: desktop) {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }

  .video_svg {
    display: none;
  }
}

.full-width-video__wrapper {
  &::after {
    background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 50%,
      rgba(0, 0, 0, 0.8) 100%
    );
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  [data-hide-gradient='true'] & {
    &::after {
      display: none;
    }
  }
  position: relative;
}

.full-width-video__overlay {
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.full-width-video__overlay {
  align-items: center;
  bottom: 0;
  color: $full-width-video-color;
  display: flex;
  padding: 1.5rem 1.25rem;
  z-index: 1;

  @include mq(desktop) {
    padding: 2.75rem 2.5rem;
  }
}

.full-width-video__heading {
  color: $full-width-video-color;
  font-size: 2.25rem;
  font-style: italic;
  line-height: 1;
  margin-bottom: 0;
  margin-top: 0;
  transform: translateY(3px);

  .rte & {
    margin-bottom: 0;
    margin-top: 0;
  }

  @include mq(desktop) {
    transform: translateY(5px);
  }
}

.full-width-video__caption.full-width-video__caption {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0;
  margin-top: 0.75rem;

  @include mq($until: desktop) {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  @include mq(desktop) {
    font-size: 18px;
    margin-top: 1.25rem;
  }
}

.full-width-video__play-button {
  &:focus {
    box-shadow: 0 0 0 3px map-get($theme-colors, 'primary');
    outline: none;
    z-index: 10;
  }
  transition: 0.3s cubic-bezier(0.87, 0, 0.13, 1);
  background-color: transparent;
  border: 0;
  border-radius: 50%;
  color: $full-width-video-color;
  height: 60px;
  margin-right: 18px;
  min-width: 55px;
  padding: 0;
  position: relative;
  width: 60px;

  @include mq(desktop) {
    height: 60px;
    margin-right: 1.5rem;
    width: 60px;
  }

  &::before {
    transition: 0.3s cubic-bezier(0.87, 0, 0.13, 1);
    background-color: 'transparent';
    border-radius: 50%;
    bottom: 2px;
    content: '';
    left: 2px;
    position: absolute;
    right: 2px;
    top: 2px;
    z-index: -1;
  }

  &:hover,
  &:focus {
    &::before {
      background-color: map-get($theme-colors, 'primary');
    }
  }

  &:focus {
    box-shadow: inset 0 0 0 1px $full-width-video-color,
      0 0 0 3px map-get($theme-colors, 'primary');
    outline: none;
    z-index: 10;
  }

  svg {
    height: 100%;
    width: 100%;
  }
}

URL: /components/raw/c-fmt-11-full-width-video-row/_styles.scss
Filesystem Path: src/components/C-FMT-11-full-width-video-row/_styles.scss
Size: 2.6 KB

Content:
$full-width-video-color: #fff;
URL: /components/raw/c-fmt-11-full-width-video-row/_variables.scss
Filesystem Path: src/components/C-FMT-11-full-width-video-row/_variables.scss
Size: 31 Bytes

Content:


                                import { Component } from '@verndale/core'
import video from '../video/video'

class FullWidthVideo extends Component {
  setupDefaults() {
    this.dom = {
      $overlay: this.el.querySelector('.full-width-video__overlay'),
      $wrapper: this.el.querySelector('.full-width-video__wrapper')
    }
  }

  addListeners() {
    const { $overlay } = this.dom;
    $overlay.addEventListener('click', this.handleClick.bind(this));
  }

  handleClick(e){
    const $button = e.target.closest('.full-width-video__play-button');

    if ($button) {
      this.removeOverlay($button);
      this.removeImage();
      this.el.dataset.hideGradient = 'true';
      new video(this.el.querySelector('.full-width-video .video')).getCurrentPlayer();
    }
  }

  removeOverlay($button) {
    if ($button) {
      const { $overlay } = this.dom;
      $overlay.parentNode.removeChild($overlay);
    }
  }

  removeImage() {
    const { $image } = this.dom;

    if ($image) {
      this.dom.$image.remove();
    }
  }
}

export default FullWidthVideo

URL: /components/raw/c-fmt-11-full-width-video-row/full-width-video-row.js
Filesystem Path: src/components/C-FMT-11-full-width-video-row/full-width-video-row.js
Size: 1 KB

Handle: @c-fmt-11-full-width-video-row--no-caption
Variants (2): Full , No Caption
Preview:
- With layout
- Component only
Filesystem Path: src/components/C-FMT-11-full-width-video-row/C-FMT-11-full-width-video-row.hbs
References (1): @video

Full Wisth Video Row

Allow content authors to feature full-width video content

Usage

Add the front-end-copmonent library to your project

yarn add @verndale/front-end-components

Import the style to your main style file in your project

@import '../../node_modules/@verndale/front-end-components/lib/full-width-video-row/styles';

Copy and paste to your project any of the markup in the alert variations - you can find the markup in the HTML tab.

Styling

The component will already have a default style/theme set, so it will work out of the box. The alert has a set of variables that may be overriden, or you may choose to just override the actual styles in your project.


@import '../../node_modules/@verndale/front-end-components/lib/full-width-video-row/styles';