Video

Stappenplan toevoegen blok aan project

Downloads

Download als eerst de laatste versie van het blok hieronder.

Toevoegen aan project

1. Pak het zojuist gedownloade zip bestand uit en verplaats de bestanden naar je project in de volgende map: custom/themes/theme-name/nrdq-blocks/src
2. Voeg het blok toe aan je project
   • Navigeer in je project naar custom/themes/theme-name/nrdq-theme/views/frontend/blocks
   • Maak een nieuwe php file aan met de naam van het blok dat je zojuist hebt toegevoegd, genaamd: video.php
   • Voeg de volgende code toe aan het bestand:

                                        
   <?php
   use Nordique\Theme\Helpers\Icon;
   use Nordique\Theme\Helpers\Utils;
   
   $image = getBlockField($attrs, 'thumbnail');
   $videoUrl = getBlockField($attrs, 'videoURL');
   $source = str_contains($videoUrl, 'youtube') ? 'youtube' : 'vimeo';
   $videoId = Utils::getVideoId($videoUrl);
   $thumbnail = Utils::getVideoThumbnail($videoId, $source);
   ?>
   
   <section class="section-video">
       <div
           class="video-player bg-lazy lazy"
           data-videoid="<?= $videoId; ?>"
           data-videosource="<?= $source; ?>"
           <?php if ($image): ?>
               style="
                   --bg-xs: url('<?= Utils::getImageUrl($image['id'], 'medium'); ?>');
                   --bg-lg: url('<?= Utils::getImageUrl($image['id'], 'full'); ?>')"
           <?php else: ?>
               style="--bg-xs: url('<?= $thumbnail; ?>')"
           <?php endif; ?>
   
       >
           <span href="javascript:;" class="play-button no-scroll"></span>
       </div>
   
       <RichText attribute="videoCaption" tag="figcaption" class="" />
   </section>
                                   

3. Je hebt nu een basis van het blok. De styling kan je nog aanpassen naar wens en ook het blok kan je, wanneer nodig aanpassen.