How to correctly add html5 video in a template

Kirby 2 Solved ✅
1

Hello, I’m trying to add a background video in the page this way:
If there is a video in the page/site -> play video -> if not -> show image (also used as poster)
To do it I tried this, that did not work (I thought it could work as an image :frowning: ):

   <div class="video">
   <?php if($video = $site->video('test.mp4')): ?>     
     <video controls="controls" autoplay loop muted="" poster="myposter.jpg">
      <source src="<?php echo $video->url() ?>" type="video/mp4" />
      <source src="HowTo.webm" type="video/webm" />
      <source src="HowTo.ogv" type="video/ogg" />	
   <?php endif ?>
     </video>
    </div>

And this: that works, but I don’t know if it correct, and how to add the webm and ogg formats correctly:

   <div class="video">
   <?php if($file = $site->file('test.mp4')): ?>     
     <video controls="controls" autoplay loop muted="" poster="myposter.jpg">
      <source src="<?php echo $file->url() ?>" type="video/mp4" />
      <source src="HowTo.webm" type="video/webm" />
      <source src="HowTo.ogv" type="video/ogg" />	
   <?php endif ?>
     </video>
    </div>

Thank you for your help.

1 Like
2

Try to search for the file’s name, but check if the file exists everytime (Code is not tested).

<div class="video">
  <video controls="controls" autoplay loop muted="" poster="myposter.jpg">
    <?php if($mp4 = $site->file('test.mp4')): ?>
      <source src="<?php echo $mp4->url() ?>" type="video/mp4" />
    <?php endif ?>
    <?php if($webm = $site->file('test.webm')): ?>
      <source src="<?php echo $webm->url() ?>" type="video/webm" />
    <?php endif ?>
    <?php if($ogg = $site->file('test.ogv')): ?>
      <source src="<?php echo $ogg->url() ?>" type="video/ogg" />
    <?php endif ?>
  </video>
</div>

Here you have to set every name by yourself. You can also give all video files the same name, save the name in a variable and search for this name.

3

If you only have the filename of the first file and the other file types have the same filename, you can get the file name from the $video variable like this:

$filename = $video->name();

and the rest of the code like @jakobploens posted, i.e. check if the file with the filename + extension exists.

1 Like
4

@jakobploens, @texnixe, thank you so much.

5

My fallback doesn’t work. Can someone say what’s the reason?

<div id="video-bg">
    <video autoplay="true" loop muted="" preload="auto" poster="fallback.png">
      <?php if($mp4 = $page->file('teaser.mp4')): ?>
        <source src="<?php echo $mp4->url() ?>" type="video/mp4" />
      <?php endif ?>
      <?php if($webm = $page->file('teaser.webm')): ?>
        <source src="<?php echo $webm->url() ?>" type="video/webm" />
      <?php endif ?>
      <?php if($ogg = $page->file('teaser.ogv')): ?>
        <source src="<?php echo $ogg->url() ?>" type="video/ogg" />
      <?php endif ?>
    </video>
</div>
6

You don’t tell Kirby where to find the file. You need the same code as for the videos:

<video autoplay="true" loop muted="" preload="auto" poster="<?php
  if($fallback = $page->image('fallback.png')):
    echo $fallback->url();
  endif;
?>">

Or a lot shorter with the e() helper:

<video autoplay="true" loop muted="" preload="auto" poster="<?php e($fallback = $page->image('fallback.png'), $fallback->url()) ?>">
7

Thank you! But why it displays me a play button on my iphone?

8

I think the autoplay “feature” is not supported on iOS, which is in fact good for the user. It costs bandwidth after all if a video starts playing as a page is loaded. Personally, I don’t like autoplaying videos, but it depends on the use case.