Video 

<div class="video-wrapper">
    <div class="video-wrapper__inner">
        <h2>Title of video</h2>
        <div class="js-player" data-plyr-provider="vimeo" data-plyr-embed-id="https://www.youtube.com/watch?v=R5waoUXqCtI"></div>
        <div>
        </div>
  • Content: 
    /* @video */

.video-wrapper {
    @include poly-padding--large;
    

    &__inner {
        max-width: 1024px;
        margin: 0 auto;
    }

    h2 {
        @include poly-margin-bottom;
    }

    .plyr--full-ui input[type=range] {
        @include themify($themes) {
            color: themed('ctaColor');
        }
    }

    .plyr__control--overlaid {
        @include themify($themes) {
            background: rgba(themed('ctaColor'), .8);
        }
    }

    .plyr--video .plyr__control.plyr__tab-focus, 
    .plyr--video .plyr__control:hover, 
    .plyr--video .plyr__control[aria-expanded=true] {
        @include themify($themes) {
            background: themed('ctaColor');
        }
    }

    .plyr__control.plyr__tab-focus {
        @include themify($themes) {
            box-shadow: 0 0 0 5px rgba(themed('ctaColor'), .5);
        }
    }
}
  • URL: /components/raw/video/_video.scss
  • Filesystem Path: src/components/_support-blocks/video/_video.scss
  • Size: 861 Bytes
  • Content: 
    /* video */
$(document).ready(function () {
    if ($('.js-player').length) {
        const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p));
    }
})
  • URL: /components/raw/video/video.js
  • Filesystem Path: src/components/_support-blocks/video/video.js
  • Size: 185 Bytes