<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=https://int.swegon.com/globalassets/digizuite/2680-en-animation-swegon-inside-ready-final-1738076803.mp4?mediaformatid&#x3D;10079 type="video/mp4">
    </video>
    <button id=Video title class="embedded-video-player__cover">
        <span class="embedded-video-player__label">
            Play video (2 minojter)
        </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": "https://int.swegon.com/globalassets/digizuite/2680-en-animation-swegon-inside-ready-final-1738076803.mp4?mediaformatid=10079",
  "altText": "Video cover image",
  "name": "Video title",
  "label": "Play video (2 minojter)",
  "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() {
            console.log({ video });
            playButton.classList.add('h-hidden');
            label.classList.add('h-hidden');
            video.setAttribute('controls', 'controls');
            video.play();
        }
    };
    
    export default EmbeddedVideoPlayer;
    
  • URL: /components/raw/embedded-video-player/EmbeddedVideoPlayer.js
  • Filesystem Path: src/components/embedded-video-player/EmbeddedVideoPlayer.js
  • Size: 919 Bytes
  • 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%;
        }
    }
    
    .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: 1.7 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.