Embedding a video from the server

Kirby 3 Solved ✅
2

You can totally do this but you have make your own kirby tag for it, or populate it from a files field. I can share some code I use with Kirby 2 which should work with Kirby 3 with some minor adjustments.

Not tested it but something like this should do it…

The tag…

Kirby::plugin('roland/videotag', [
  'tags' => [
    'video' => [
      'attr' => [
        'width',
        'height',
        'poster',
        'text',
        'caption',
        'title',
        'class',
        'vidclass',
        'caption',
        'preload',
        'controls',
        'webm',
        'ogv',
        'mp4'
      ],
      'html' => function($tag) {
        $url     = $tag->attr('video');
        $caption = $tag->attr('caption');
        $alt     = $tag->attr('alt');
        $title   = $tag->attr('title');
        $link    = $tag->attr('link');
        $caption = $tag->attr('caption');
        $file    = $tag->file($url);

        // use the file url if available and otherwise the given url
        $url = $file ? $file  : url($url);
        // alt is just an alternative for text
        if($text = $tag->attr('text')) $alt = $text;
        // try to get the title from the image object and use it as alt text
        if($file) {
          if(empty($alt) and $file->alt() != '') {
            $alt = $file->alt();
          }
          if(empty($title) and $file->title() != '') {
            $title = $file->title();
          }
        }
        if(empty($alt)) $alt = pathinfo($url, PATHINFO_FILENAME);
        $args = array(
          'videos' => array( $file ),
          'width'  => $tag->attr('width'),
          'height' => $tag->attr('height'),
          'class'  => $tag->attr('vidclass'),
          'poster' => $tag->attr('poster'),
          'preload' => $tag->attr('preload'),
          'caption' => html($caption),
          'controls' => $tag->attr('controls'),
          'title'  => html($title),
          'url'    => html($url),
          'alt'    => html($alt));
        if ( $poster = $tag->page()->images()->find($tag->attr('poster'))) {
          $args['poster'] = $poster;
        }

        if ( $mp4 = $tag->page()->videos()->find($tag->attr('mp4'))) {
          $args['videos'][] = $mp4;
        }

        $video = snippet('common/site-video', $args, true);

        $figure = new Brick('figure');
        $figure->addClass($tag->attr('class'));
        $figure->append($video);
        if(!empty($caption)) {
          $figure->append('<figcaption>' . html($caption) . '</figcaption>');
        }
        return $figure;
      }
    ]
  ]
]);

This tag calls a snippet to render the HTML for actual player…

<?php

// stop without videos

if(empty($videos)) return;
// set some defaults
if(!isset($width))    $width    = 400;
if(!isset($height))   $height   = 300;
if(!isset($preload))  $preload  = true;
if(!isset($controls)) $controls = true;
// build the html atts for the video element
$preload  = ($preload)  ? ' preload="preload"'   : '';
$controls = ($controls) ? ' controls="controls"' : '';
$poster_attr = ($poster) ? ' poster="'. $poster->url() .'"' : '';
?>
<video width="<?= $width ?>" height="<?= $height ?>" class="<?= $class ?>" <?= $preload . $controls . $poster_attr ?>>

    <?php foreach($videos as $video): ?>
    <?php if(is_a($video, 'file')): ?>
    <source src="<?= $video->url() ?>" type="<?= $video->mime() ?>" />
    <?php endif ?>

    <?php if($poster):?>
      <a href="<?= $video->url() ?>"> <img src="<?= $poster->url() ?>" alt="<?= $title ?>" /> </a>
    <?php endif ?>

  <?php endforeach ?>

  <?php foreach($videos as $video): ?>
  <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "VideoObject",
    "name": "<?= $title ?>",
    "description": "<?= $caption ?>",
    "thumbnailUrl": "<?= $poster->url() ?>",
    "contentUrl": "<?= $video->url() ?>",
    "uploadDate": "<?= $video->modified('%d/%m/%Y', 'strftime') ?>"
  }
  </script>
  <?php endforeach ?>
</video>

And to use it in a textarea…

(video:videofile.mp4 width:100% height:100% poster:yourposterimage.jpg class:video-post title:Your Video Title caption:Your Video Caption)
1 Like