Video
ready

Introduction

Provides a custom-styled video playback of a YouTube video embed, removing as much default YouTube player styling as possible.

Examples

Video

Don't take our word for it... hear it from our community
<div class="video" data-js="video" data-video-id="xYgyfKpOkeM">
      <div class="video__preview">
        <div class="video__heading text-center text-invert">Don't take our word for it... hear it from our community</div>
        <img src="/v2.0/assets/images/content/banner-get-a-loan.jpg" class="img-respond--fill">
      </div>
      <div id="xYgyfKpOkeM"></div>
      <div class="video__interface">
        <span class="icon icon--play-white video__play" data-js="video-play"></span>
        <span class="icon icon--x-white video__close" data-js="video-close"></span>
      </div>
    </div>

Dependencies

  • src/styles/base/*.scss
  • src/styles/components/blocks/_video.scss
  • src/scripts/modules/jquery.pfVideo.js

Usage

Class/JavaScript Hook Description Required?
.video Placed on the outermost tag that will contain the video component. Required
[data-js=video] Placed on the outermost tag that will contain the video component. Required
[data-video-id=YTVideoID] Placed on the [data-js=video] to define the YouTube ID of the video in the html. Required
.video--16-9 Sets the aspect ratio of the video component to be 16:9. Optional
.video__preview Placed on the tag that wraps the img element used as for the video preview (when video is not playing). Required
.video__heading Placed on the tag that will contain a heading for the video. The heading should be placed inside the video__preview. Optional
#[YTVideoID] Placed on the tag will be replaced by the video iFrame embed. YouTube requires an id, so this will be the same as the YouTube ID you used on the data-video-id attribute. Required
.video__play Placed on the tag that represents the custom play button. Required
[data-js=video-play] Placed on the tag that represents the custom play button. Required
.video__close Placed on the tag that represents the custom close button. Required
[data-js=video-close] Placed on the tag that represents the custom close button. Required