How to add videos to pages?

So I want to add videos to my page but unsure how to… I’ve sort of done it but its not the way I want to do it… So within user (or user/pages) I would create a video folder. This was would have subfolders containing 1-5 videos each.

So within \user hemes\hofb emplates\modular I have created a video.html.twig when I use the example within the learn section for videos its working fine {{[‘test.mp4’].resize(400, 200).html() }}

Within \user\pages\09.videos\artist-videos est-video-1_video I have my test.mp4 video and I have the file which doesn’t have much in it. doesn’t contain the markdown to display the video. When I view this page the page gets rendered and the video displays… So my first issue is that within the twig the video is hard coded to a specific name and I dont want all my videos in different directorys with the same name.

In the twig I tried {{, 200).html() }} | {{, 200).html() }} | {{ }} {{ }} and within I had the markdown for outputting the video. Page rendered but no video displayed.

So I changed the twig to {{ dump( }} refreshed the page no video appears but within the debugger I can see in the messages section an aray test.mp4 as below.

array:1 [ "test.mp4" => Grav\Common\Page\Medium\VideoMedium {#1740 #mode: "source" #_thumbnail: null #thumbnailTypes: array:2 [ 0 => "page" 1 => "default" ] #thumbnailType: null #alternatives: [] #attributes: array:1 [ "controls" => true ] #styleAttributes: [] #gettersVariable: "items" #items: array:11 [ "type" => "video" "thumb" => "media/thumb-mp4.png" "mime" => "video/mp4" "image" => array:1 [ "filters" => array:1 [ "default" => array:1 [ 0 => "enableProgressive" ] ] ] "filepath" => "C:/MAMP/htdocs/user/pages/09.videos/artist-videos/test-video-1/_image /test.mp4" "filename" => "test.mp4" "basename" => "test" "extension" => "mp4" "path" => "C:/MAMP/htdocs/user/pages/09.videos/artist-videos/test-video-1/_image " "modified" => 1428576482 "thumbnails" => array:1 [ "default" => "C:/MAMP/htdocs/system/images/media/thumb-mp4.png" ] ] #blueprints: null #storage: null #parsedown: null } ]

What I cant figure out is why no video appears… has ![](test.mp4?resize=640,320) inside of it.

Any ideas?

Kinda hard to read your message when you don’t use any markdown tags to highlight code :frowning: If you click the question mark (?) in the forum input box you will get some help on how to use code and codeblocks. Makes it much easier to read code and make sense of it :slight_smile:

Anyway, couple of things I noticed. First you have a _video folder. Having an _ at the start of the folder signifies to Grav this is a modular folder, meaning its part of a modular page. The downside of this is that because it’s part of another page, it’s not actually routable directly. This could be an issue if you plan on reaching videos of this page from another page.

Second, the main issue is that you have to understand how page media works. It works for videos, the same way it works for images, just with a more limited set of functionality (can’t crop, add filters, etc). So make sure you read the docs on Media handling so you have a good grasp of it.

What this means is that os returns an array of all the videos. There’s a shortcut that enables you to simply type[''] that will try to find the file in the arrays it knows about, but that’s only when you know the specific file name. Normally if you don’t know the file, or don’t know the number of files, you would loop over the array of videos, and output them:

{% for video in %}
{{ video.resize(300,300) }}
{% endfor %}

You can use metafiles to store extra information about each video if you wish.

hmmm, yeah as the skeleton had all pages as mod_alt thats what all my pages are based off, having no real understanding of code just made it easier to use the already existing file structure and deleting and renaming parts to fit my needs. I could do a cleanup and try getting everything working as as many of these pages only have one part to it and not multiple.

Under /user/pages/videos/ I would have 50 folders like artist-test-1, artist-test-2 etc. Each one of these folders could have between 1-5 videos. I however plan on only showing one video per page.

On my page i.e. 09.videos/artist-videos/test-video-1 within the .md I would have the below.


I know the path of my video and I know the name of my video and with the built in media capability’s of Grav I thought something like that would of worked out of the box but it doesn’t (?) unless I am mis-understanding something here…

Within all the examples point to hard coded paths. When I add the be low to the twig the video works on the page.

{{['artistname-song.mp4'].resize(400, 200).html() }}

The issue with that is that I would have to call all videos artistname-song.mp4

I cant seem to figure out how to basically say in the twig to go check the markup and display that markup video…


You can use a variable in the twig format, and you could set a custom page header variable with the artist name. So something like this for the page:

 title: Iron Maiden Page
 artist: iron-maiden

Then in the twig:

{{[page.header.artist~'-song.mp4'].resize(400,200).html() }}

This is the same as:

{{['iron-maiden-song.mp4'].resize(400,200).html() }}


Once again thanks for your help. Your support has been awesome hopefully others will find this useful too.

I modified the above slightly to make song a variable too as it changes per video. Only took me an hour and 20 page breaking errors lol but got their in the end :slight_smile:

Doing the below.

{{[page.header.artist~'-''.mp4'].resize(640,320).html() }}

The above means that videos will be within the page. Now I am trying to make the videos come from the videos folder followed by artist-name.

I’ve tried the below and it didn’t work.

{{ pages.find('/videos/'~page.header.artist~'/').media[page.header.artist~'-''.mp4'].resize(640,320).html() }}

Without your page content, I can’t test definitively, but from your sample code it looks pretty good.

I think you might have a very slight syntax issue. Try this first:

{{ pages.find('/videos/'~page.header.artist).media[page.header.artist~'-''.mp4'].resize(640,320).html() }}

If that’s not working, what I would suggest is breaking it down and testing with the debugger bar (look in messages tab).

{{ dump(pages.find('/videos/'~page.header.artist)) }}

Does this return the relevant page object? If so, try this:

{{ dump(pages.find('/videos/'~page.header.artist).media) }}

Did you get an array of the video files and is the one your looking for in there? If so try this:

{{ dump(page.header.artist~'-''.mp4') }}

Does that match the video file in the media array?

Hi, awesome that worked after changing pages.find to page.find as per below. The dumps showed null so helped in telling me it could not find the videos folder.

{{ page.find('/videos/'~page.header.artist).media[page.header.artist~'-''.mp4'].resize(640,320).html() }}

Ugg, I can’t believe i missed that! Didn’t even notice, sorry.