Vebego Component Library

Video Block 

<section class="org-video-block">
    <div class="vebego-container">
        <div class="wrapper">
            <div class="first">
                <div class="mol-title title-underline">
                    <span class="atm-heading h-subtitle">The quick brown fox jumps over the lazy dog</span>

                    <span class="atm-heading h1">The quick brown fox jumps over the lazy dog</span>

                </div>

            </div>
            <div class="second">
                <div class="mol-intro-media">
                    <div class="intro-media-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>
                            <span class="atm-icon  fal fa-play-circle  fa-md "></span>
                            <span class="text">
                                Bekijk film
                            </span>
                        </a>

                    </div>
                </div>

                <div class="play-button">
                    <div class="button"></div>
                </div>
            </div>
        </div>
    </div>
 
<section class="org-video-block">
    <div class="vebego-container">
        <div class="wrapper">
      <div class="first">
        {{render "@title" title merge=true}}
      </div>
       {{#if video}}
        <div class="second">
        {{render '@intro-media--video'}}
        <div class="play-button">
        <div class="button"></div>
        </div>
        </div>
      {{/if}}
    </div>
</div>
 
/* No context defined. */
  • Content: 
    .org-video-block {
    @apply mb-16;

    .mol-title {
        @apply text-center;

        &::after {
            @apply hidden;
        }
    }

    .mol-intro-media {
        @apply pr-0 mt-0;

        &::before {
            @apply hidden;
        }

        .intro-media-video {
            @apply mx-auto left-0 top-0;

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

                .text {
                    @apply hidden;
                }

                .atm-icon {
                    @apply absolute left-1/2 top-1/2 transform -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;
                    }
                }
            }
        }
    }
}

.org-video-block.video-no-thumb .mol-intro-media {
    @apply bg-primary-100 w-[500px] h-[281px] mx-auto;

    .atm-play {
        @apply mt-[145px];
    }
}
  • URL: /components/raw/video-block/video-block.css
  • Filesystem Path: src\components\04-organisms\video-block\video-block.css
  • Size: 1.5 KB

No notes defined.