Div container for lazyloading with kirby3-video

Kirby 3 Solved ✅
1

Hi
I’m using the kirby3-video to embed html5 videos.

  • I would like to wrap the video inside a div container to lazyload the poster image inside of it.
  • Add a class to video
  • Be able to return the video ratio() to calculate the right height from a fluid div parent. (I know it’s not the best practice to set style inside html but I’m ok with that).

It could be like

<figure>
    <div class="container" style="position:relative;height: 0;display:block;padding-bottom:calc(100% / '. $ratio .')">
        <video class="lazyload">...</video>
    </div>
    <figcaption>...</figcaption>
</figure>

This is the snippet used for, but I don’t know how to use the new method Html::tag() in that case.

<?php
$posterimage = Html::tag('img', null, ['src' => $posterurl, 'alt' => $alt]);
$videsourcetag = Html::tag('source', null, ['src' => $videourl, 'type' => $mime]);
$videsourcetag .= Html::tag('a', [$posterimage], ['href' => $videourl]);
$vidtag = Html::tag('video', [$videsourcetag], ['poster' => $posterurl, 'width' => $width, 'height' => $height, 'controls' => $controls, 'preload' => $preload, 'class' => $vidclass]);

if($caption) {
  $cap = Html::tag('figcaption', [$caption]);
} else {
  $cap = null;
}

$container = Html::tag('div');

$vidtag .= $cap;
$player = Html::tag('figure', [$vidtag], ['class' => $class]);
?> 

<!-- Video Player -->
<?= $player ?>

Thanks !

2 
<?php
$posterimage = Html::tag('img', null, ['src' => $posterurl, 'alt' => $alt]);
$videsourcetag = Html::tag('source', null, ['src' => $videourl, 'type' => $mime]);
$videsourcetag .= Html::tag('a', [$posterimage], ['href' => $videourl]);
$vidtag = Html::tag('video', [$videsourcetag], ['poster' => $posterurl, 'width' => $width, 'height' => $height, 'controls' => $controls, 'preload' => $preload, 'class' => $vidclass]);

if($caption) {
  $cap = Html::tag('figcaption', [$caption]);
} else {
  $cap = null;
}
$vidtag .= $cap;
$container = Html::tag('div', [$vidtag], ['class' => 'container']);


$player = Html::tag('figure', [$container], ['class' => $class]);
?> 

<!-- Video Player -->
<?= $player ?>
3

Thanks, I was able to return ratio by adding a new attr inside the index.php file and add a class to the video simply.

-> But the code you gave me returns the figcaption inside the div. My brain is like :exploding_head: when I try to understand the logic of the Html::tag(). How to set the figcaption next to the div, like mentionned above ?

4

Ok it’s corrected. I post the code here. Thank you texnixe !

<?php
$posterimage = Html::tag('img', null, ['src' => $posterurl, 'alt' => $alt]);
$videsourcetag = Html::tag('source', null, ['src' => $videourl, 'type' => $mime]);
$videsourcetag .= Html::tag('a', [$posterimage], ['href' => $videourl]);
$vidtag = Html::tag('video', [$videsourcetag], ['poster' => $posterurl, 'width' => $width, 'height' => $height, 'controls' => $controls, 'preload' => $preload, 'class' => 'lazyload']);

if($caption) {
  $cap = Html::tag('figcaption', [kt($caption)]);
} else {
  $cap = null;
}


$container = Html::tag('div', [$vidtag], ['class' => 'container', 'style' => 'float:left;width:100%;position:relative;height:0;display:block;padding-bottom:calc(100% / '. $ratio .')']);
$container .= $cap;

$player = Html::tag('figure', [$container], ['class' => $class]);
?> 


<!-- Video Player -->
<?= $player ?>