Vebego Component Library

Video Player 

<div class="mol-video-player">
    <div class="video-player-video">
        <picture class="atm-image ">
            <source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
            <source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
            <img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
        </picture>
        <a class="atm-play " title="Bekijk film" href="https://www.youtube.com/embed/L6LsRTfQGDo" data-fslightbox>
            <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">
    {{#if video}}
        <div class="video-player-video">
            {{render '@image' videoThumbnail merge=true}}
            {{render '@play' play merge=true}}       
        </div>
    {{/if}}
</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;

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

        .atm-play {
            backdrop-filter: blur(3px);
            @apply bg-white  bg-opacity-40 rounded-full  w-28 h-28;
            @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;
                }
            }
        }
    }
}
/* 
.tpl-news-page,
.tpl-blog-page,
.tpl-vacancy-page,
.tpl-initiative-page {
    .video-player-video,
    .video-player-image,
    .video-player-slider {
        max-width: 768px;
        max-height: 768px;
    }
} */
  • URL: /components/raw/video-player/video-player.css
  • Filesystem Path: src\components\03-molecules\video-player\video-player.css
  • Size: 1.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');
    });

})();
  • URL: /components/raw/video-player/video-player.js
  • Filesystem Path: src\components\03-molecules\video-player\video-player.js
  • Size: 350 Bytes

No notes defined.