Vebego Component Library

Video Block 

<section class="org-video-block">
    <div class="vebego-container">
        <div class="wrapper">

            <h2 class="atm-heading ">Relevant voor jou</h2>

            <div class="mol-video-player">
                <div class="video-player-video">
                    <div class="thumbnail">
                        <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>

                        <button class="atm-play " title="Bekijk film">
                            <i class="atm-icon  fal fa-play-circle  fa-md "></i>

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

                    </div>

                    <div class="atm-video">
                        <iframe src="https://www.youtube.com/embed/L6LsRTfQGDo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
                        </iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 
<section class="org-video-block">
  <div class="vebego-container">
    <div class="wrapper">

      {{render "@heading" heading}}

      {{#if video}}
          <div class="mol-video-player">
            <div class="video-player-video">
              <div class="thumbnail">
                {{render '@image' videoThumbnail merge=true}}
                
                {{render '@play' play merge=true}}
               
              </div> 
                  {{render '@video' video merge=true}}    
            </div>
          </div>
      {{/if}}
    </div>
  </div>
</section>
 
{
  "heading": {
    "text": "Relevant voor jou",
    "tag": "h2"
  }
}
  • Content: 
    .org-video-block {
    @apply mb-16;

    .mol-video-player {
        @apply w-full rounded-xl overflow-hidden;

        .thumbnail{
            @apply w-full h-full absolute z-20;
        }

        .atm-image img{
            @apply aspect-video object-cover;
        }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        &.atm-heading {
            @apply text-secondary-col-1;
        }
    }
}

.org-video-block.video-no-thumb .mol-video-player {
    @apply bg-primary 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: 601 Bytes
  • Content: 
    (function () {

  'use strict';

  const videoBlocks = document.querySelectorAll('.org-video-block');

  if(videoBlocks){
    videoBlocks.forEach((videoBlock) => {
      const playbutton = videoBlock.querySelector('.atm-play');
      const thumbnail = videoBlock.querySelector('.thumbnail');
      const video = videoBlock.querySelector('.atm-video iframe');

      playbutton.addEventListener('click', () => {
        video.src = video.src + "?autoplay=1";
        thumbnail.classList.add('hidden');
      });
    })
  }
})();
  • URL: /components/raw/video-block/video-block.js
  • Filesystem Path: src\components\04-organisms\video-block\video-block.js
  • Size: 545 Bytes

No notes defined.