Swegon Component Library

Embedded Video Player 

<div class="js-embedded-video-player embedded-video-player  embedded-video-player--cover">
    <video aria-labelledby=Video title class="embedded-video-player__embedded" poster=/mocks/img/video-cover.jpg name="media">
        <source src=/mocks/video/sample-5s.mp4 type="video/mp4">
    </video>
    <button id=Video title class="embedded-video-player__cover">
        <span class="embedded-video-player__label">
            Play video (2 min)
        </span>
    </button>
</div>
 
<div class="js-embedded-video-player embedded-video-player {{getmodifiers modifiers " embedded-video-player"}}">
    <video aria-labelledby={{name}} class="embedded-video-player__embedded" poster={{coverImageUrl}} name="media">
        <source src={{url}} type="video/mp4">
    </video>
    <button id={{name}} class="embedded-video-player__cover">
        <span class="embedded-video-player__label">
            {{{label}}}
        </span>
    </button>
</div>
 
{
  "coverImageUrl": "/mocks/img/video-cover.jpg",
  "url": "/mocks/video/sample-5s.mp4",
  "altText": "Video cover image",
  "name": "Video title",
  "label": "Play video (2 min)",
  "modifiers": [
    "cover"
  ]
}
  • Content: 
    const EmbeddedVideoPlayer = (el) => {

    const playButton = el.querySelector('.embedded-video-player__cover');
    const video = el.querySelector('.embedded-video-player__embedded');
    const label = el.querySelector('.embedded-video-player__label');

    playButton.addEventListener('click', playVideo);
    el.addEventListener('keydown', function (event) {
        if (el.activeElement !== playButton && el.activeElement !== video) return;
        if ((event.key === ' ' || event.key === 'Enter')) {
            event.preventDefault(); // Prevent scrolling when pressing Space
            playVideo();
            video.focus();
        }
    });

    function playVideo() {
        playButton.classList.add('h-hidden');
        label.classList.add('h-hidden');
        video.setAttribute('controls', 'controls');
        video.play();
    }

    function updateVideoPlayerContent(el, data) {
        const d = (data && data.data) || data;

        const video = el.querySelector('video');
        const durationEl = el.querySelector('.embedded-video-player__label');
        if (!video || !d) return;

        if (typeof d.coverImage === 'string') {
            video.poster = d.coverImage;
        }

        if (typeof d.url === 'string') {
            video.src = d.url;
            video.load();
        }

        if (durationEl && typeof d.label === 'string') {
            durationEl.textContent = d.label;
        }
    }

    function resetVideoPlayer(el) {
        const video = el.querySelector('video');
        const playButton = el.querySelector('.embedded-video-player__cover');
        const label = el.querySelector('.embedded-video-player__label');

        video.pause();
        video.removeAttribute('controls');
        playButton.classList.remove('h-hidden');
        label.classList.remove('h-hidden');
    }

    el.addEventListener('update', (data) => {
        updateVideoPlayerContent(el, data);
        resetVideoPlayer(el);
    });

    el.addEventListener('pause', () => {
        resetVideoPlayer(el);
    });
};

export default EmbeddedVideoPlayer;
  • URL: /components/raw/embedded-video-player/EmbeddedVideoPlayer.js
  • Filesystem Path: src/components/embedded-video-player/EmbeddedVideoPlayer.js
  • Size: 2.1 KB
  • Content: 
    $embedded-video-player-ratio: percentage(9 / 16);

.embedded-video-player {
    position: relative;
    display: inline-block;
    width: 100%;

    &--cover &__cover {
        visibility: visible;
    }

    &__embedded {
        width: 100%;
    }

    &--full-height {
        height: 100%;

        .embedded-video-player__cover {
            height: 100%;
            bottom: 0;
            right: 0;
            padding: 0;
        }

        .embedded-video-player__embedded {
            background: $color-black;
            height: 100%;
        }
    }
}

.embedded-video-player__cover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    padding-bottom: $embedded-video-player-ratio;
    background-size: cover;
    background-position: center;
    visibility: hidden;
    cursor: pointer;

    &:before {
        content: " ";
        display: block;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: size(15);
        background: linear-gradient(to top, rgba($color-black, 0.8), transparent);

        @include breakpoint($s) {
            height: size(17.5);
        }
    }
}

.embedded-video-player__label {
    color: $color-white;
    font-size: size(2);
    line-height: size(3);
    font-weight: $font-weight-bold;
    position: absolute;
    left: size(2.25);
    bottom: size(3);
    padding-left: size(7.5);

    @include breakpoint($s) {
        left: size(4);
        bottom: size(5.25);
    }

    &:before,
    &:after {
        content: " ";
        display: block;
        position: absolute;
        left: 0;
        bottom: -50%;
    }

    &:before {
        width: size(6);
        height: size(6);
        background: $color-white;
        border-radius: 100%;
    }

    &:after {
        margin-left: size(2.5);
        margin-bottom: size(1.25);
        border: solid size(1.75) $color-gray-5;
        transform: scaleY(0.7);
        border-color: transparent transparent transparent $color-gray-5;
    }
}
  • URL: /components/raw/embedded-video-player/embedded-video-player.scss
  • Filesystem Path: src/components/embedded-video-player/embedded-video-player.scss
  • Size: 2 KB
  • Content: 
    import EmbeddedVideoPlayer from './EmbeddedVideoPlayer';

const els = document.querySelectorAll('.js-embedded-video-player');

for (let el of els) {
    new EmbeddedVideoPlayer(el);
}
  • URL: /components/raw/embedded-video-player/index.js
  • Filesystem Path: src/components/embedded-video-player/index.js
  • Size: 184 Bytes

No notes defined.