Video with Kirby

Kirby 3 Questions 🤔
1

I would like to add a video which can be managed in the backend. How do I add a video to blueprint which has already been added to the content folder? Furthermore, using PHP how do I load the video?

<video class="video-1" autoplay loop muted>
  <?php if($mp4 = $page->file('video.mp4')): ?>
    <source src="<?php echo $mp4->url() ?>" type="video/mp4" />
  <?php endif ?>
</video>
2

The easiest way would probably to use my plugin, which contains a Custom tag for textarea fields and a custom block for the new Editor field in Kirby 3.5.

If you want to do it manually, you could use the snippet from my plugin as a starting point. What you have above will work, you just need to create a files field in your bluprint and check that in your if statement instead.

See towards the bottom of that page for an example of how to use it in the template.

3

You don’t need a files field, a section to display the video will suffice, unless you have multiple videos and want to select only a selection of these.

But you will then need a files section to show the video in the page.

Again, if you have only one video, you can fetch it with the $page->video() method.

<?php if ( $video = $page->video() ): ?>
<video class="video-1" autoplay loop muted>
    <source src="<?php echo $video->url() ?>" type="<?= $video->type() ?>" />
</video>
<?php endif ?>
4

Brilliant thanks for the advice, I have tried to include video in my yml as i did with an image, this does not work. What is the correct way to add a video section into my blueprint?

  HomeVideo:
    type: files
    headline: Video
    max: 1
    layout: cards
5

Something like this should do it:

sections:
  # VIDEO FILES
  homevideo:
    headline: Video
    type:     files
    layout:   cards
    sortBy:   title
    size:     tiny
    max:      1
6

To limit the files uploadable to that section, you can add a file blueprint that limits uploads to videos via the accept option, see the docs.

When posting blueprint parts, it is useful when we get the full context, otherwise we don’t know what something is supposed to be.

7

I have attempted to add this in the ways advised. I get this in the HTML:

<source src="unknown" type="">

And when I view the uploaded video in panel I get this error: This file has no blueprint yet. You can define the setup in /site/blueprints/File.yml

In my yml this is the layout, does it need to be in sections instead of fields and how do I use both?

title: Home
fields:
  HeroTitle:
    label: Hero Title Home
    type: text
  HomeVideo:
    headline: Home Video
    type:     files
    layout:   cards
    sortBy:   title
    size:     medium
8

Because you have added a field, not a section. To mix section with fields, you need a separate section for fields, and then the files section. The documentation is your friend. There are also many example blueprints, both in the Starterkit and in the documentation.

difference:

9

Okay thank you, this is good advice. You are amazing!

10

Using this method it displays all media, I would only like to display specific videos. How do I do this?
sections:
HomeVideo:
type: files
headline: Video Home
max: 1
layout: cards

11

What do you mean with specific videos?

As I already said, you must add a template/blueprint for files to limit what can be uploaded/what is shown. See above.

12

I am sorry I do not understand. This is what I have so far:

<?php if ( $video = $page->HomeVideo()->toFiles()): ?>
        <video class="video-1" autoplay loop muted>
            <source src="<?php echo $video->url() ?>" type="<?= $video->type() ?>" />
        </video>
    <?php endif ?>

sections:
  homevideo:
    headline: Video
    type:     files
    layout:   cards
    sortBy:   title
    size:     tiny
  content:
    type: fields
    fields:
      HomeVideo:
        type: files
        headline: Video Home
        max: 1
        layout: cards
        template: video
13

If you fetch only one file, it’s toFile() not toFiles().

14

Ahh great thanks, yes that worked. The type attribute was not working correctly so I just added mp4 manually as I will not be hosting any other formats:

<source src="<?php echo $video->url() ?>" type="video/mp4" />

15

What did type() return?

16

Maybe it’s mime() instead…

17

I had: type="<?= $video->type() ?>".

I have noticed that in the backend I am still getting this message. However the video upload does work still.

This file has no blueprint yet. You can define the setup in /site/blueprints/File.yml

18

The error message is wrong. File blueprints go into /site/blueprints/files

And yes, it must be <?= $video->mime() ?>.

19

Ahhh okay, well i have no ‘files’, i created a files.yml, but i will delete it… so i need a folder called files and this should fix the problem?

20

Well, /site/blueprints/files is the folder where you put your files blueprints, e.g.

/site/blueprints/files/image.yml.