Kirby Page Builder & Videos

The CMS Questions
1

Hello friends!

I’m new here. Nice to meet you all! To get right to it, I’m new to Kriby / PHP (have learned a lot just playing with Kirby for the last week though). I’ve sat here for a few hours trying to get a single mp4 video to display on my website after adding it to a file field in the panel. I’ve looked around here and tried a few solutions but nothing has worked for me. It’s worth noting I’m using the Kirby Page Builder plugin and this file field is a block I’ve set up.

I want to be able to add that single mp4 video file to a file field within the page builder section in the panel and then have it display on the corresponding page & location using an HTML5

In my head the following php code would work, but I can’t get it to load anything.

    <section class="video">
        <video class="project-video" width="100%" autoplay loop muted playsinline>
          <source src="<?= $data->url() ?>" type="video/mp4">
        </video>
    </section>

I’ve used the $data tag elsewhere to call images and text, but not videos. Perhaps videos aren’t supported? Either way, what would you guys say is the most straightforward way to output the video file url from the file field in Page Builder into my code?

You can see the page in question here. I’d like the video to load amongst the copy/imagery on the left hand side.

thanks a million!

2

Hi, and welcome to the Kirby community,

A files field just stores a file ID, before you can use it in your templates, you have to convert the field value into a file object. This is achieved through the toFile() method for a single file stored in the field, or the toFiles() method for multiple fiiles.

Assuming you only store a single video:

<?php if ($video = $data->fieldname()->toFile()): ?>
  <section class="video">
        <video class="project-video" width="100%" autoplay loop muted playsinline>
          <source src="<?= $video->url() ?>" type="video/mp4">
        </video>
    </section>
<?php endif ?>

In the first line, you have to replace fieldname with the name of the field you have defined in your blueprint. If in doubt, please post your blueprint.

1 Like
3

Ah. This makes total sense and it worked perfectly. Thanks so much texnixe!!