How to correctly add html5 video in a template

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.

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.

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

@jakobploens, @texnixe, thank you so much.

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>

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()) ?>">

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

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.