Vebego Component Library

Video Player: Basic 

<div class="mol-video-player basic">
    <div class="video-player-video">

        <div class="atm-video">
            <video playsinline autoplay muted loop>
                <source src="https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
            </video>
        </div>
        <a class="atm-play " title="Bekijk film">
            <i class="atm-icon  fal fa-play-circle  fa-md "></i>

            <span class="text">
                Bekijk film
            </span>
        </a>

    </div>
</div>
 
<div class="mol-video-player basic">
        <div class="video-player-video">
            {{#if inline}}
                {{render '@video--external' inline merge=true}}
            {{else}}
                {{render '@video--external'}}
            {{/if}}
                {{render '@play' play merge=true}} 
        </div>
</div>
 
/* No context defined. */
  • Content: 
    .mol-video-player {
    @apply pr-0 mt-0 relative mx-auto;
    @apply lg:w-3/5;

    .video-player-video {
        @apply mx-auto left-0 top-0 relative;

        &:hover {
            .atm-play {
                @apply scale-105;
            }
        }

        .atm-image img {
            @apply w-full;
        }

        .atm-video {
            @apply w-full h-full;

            video {
                @apply w-full h-full object-cover cursor-default;
            }
        }

        .atm-play {
            backdrop-filter: blur(3px);
            @apply bg-white bg-opacity-40 rounded-full  w-28 h-28 transition;
            @apply left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 absolute;

            .text {
                @apply hidden;
            }

            .atm-icon {
                @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;

                &::after {
                    content: '';
                    @apply bg-white absolute rounded-full w-[90px] h-[90px] left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[-1];
                }

                &.fa-play-circle:before {
                    content: '\f04b';
                    font-size: 30px;
                    font-weight: 900;
                    z-index: 999;
                }
            }
        }
    }

    /* .video-player-video.basic {
        @apply h-full;

        .atm-play {
            @apply bg-white bg-opacity-80 rounded-full w-12 h-12;
            @apply left-4 top-auto bottom-4 absolute -translate-x-0 -translate-y-0;
        }
        .atm-icon {
            @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;

            &::after {
                content: '';
                @apply bg-white absolute rounded-full w-10 h-10 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[-1];
            }

            &.fa-play-circle:before {
                content: '\f04b';
                font-size: 16px;
                font-weight: 900;
                z-index: 999;
            }
        }
    } */

    &.basic {
        .video-player-video {
            @apply h-full;

            .atm-play {
                @apply bg-white bg-opacity-80 rounded-full w-12 h-12;
                @apply left-4 top-auto bottom-4 absolute -translate-x-0 -translate-y-0;
            }
            .atm-icon {
                @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;

                &::after {
                    content: '';
                    @apply bg-white absolute rounded-full w-10 h-10 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[-1];
                }

                &.fa-play-circle:before {
                    content: '\f04b';
                    font-size: 16px;
                    font-weight: 900;
                    z-index: 999;
                }
            }
        }
    }
}
  • URL: /components/raw/video-player/video-player.css
  • Filesystem Path: src\components\03-molecules\video-player\video-player.css
  • Size: 3 KB
  • Content: 
    (function () {

    'use strict';

    // Make thumbnail clickable

    $('.mol-intro-media .intro-media-video .atm-play').on(
        'click',
        function (e) {
            e.stopPropagation();
        }
    );

    $('.mol-intro-media .intro-media-video').on('click', function (e) {
        $(this).find('.atm-play').trigger('click');
    });
})();

// Video Player Basic Functionality
$(document).ready(function () {
    $('.mol-video-player').each(function () {
        const $player = $(this);
        const video = $player.find('video')[0];
        const $playButton = $player.find('.atm-play');

        if (video && $playButton.length) {
            const $icon = $playButton.find('.atm-icon');
            
            function updatePlayButton() {
                if (video.paused) {
                    $icon.removeClass('fa-pause').addClass('fa-play-circle');
                } else {
                    $icon.removeClass('fa-play-circle').addClass('fa-pause');
                }
            }
            
            $playButton.on('click', function (e) {
                e.preventDefault();
                e.stopPropagation();

                if (video.paused) {
                    video.play();
                } else {
                    video.pause();
                }
            });
            
            // Listen to video events to update button
            $(video).on('play pause', updatePlayButton);
            
            // Initial state
            updatePlayButton();

            $(video).css('cursor', 'default');
        }
    });
});
  • URL: /components/raw/video-player/video-player.js
  • Filesystem Path: src\components\03-molecules\video-player\video-player.js
  • Size: 1.6 KB

No notes defined.