Embed and showcase video content
Video collections display video content with embedded players.
Creating a Video Entry
astrolock content videos "Studio Tour"
Or create manually at content/videos/studio-tour.md:
---
title: "Studio Tour"
date: 2025-01-15T00:00:00Z
author: "Creator Name"
description: "A walkthrough of my home studio setup"
image: "/images/content/videos/studio-tour-thumb.jpg"
categories:
- Behind the Scenes
tags:
- Studio
- Setup
---
Description and notes about the video...
Embedding Videos
YouTube Videos
Use the YouTube MDX component to embed videos:
---
title: "My Tutorial"
---
Check out this tutorial:
<Youtube id="dQw4w9WgXcQ" title="Tutorial Video" />
The id is the video ID from the YouTube URL (e.g., youtube.com/watch?v=dQw4w9WgXcQ).
Info
YouTube embeds use a lightweight player that only loads when clicked, improving page performance.
Self-Hosted Videos
For self-hosted videos, use the media object in frontmatter:
---
title: "My Video"
media:
name: "my-video"
author: "Creator Name"
collection: "videos"
contentType: "video"
contentExtension: "mp4"
---
Upload the video file to public/video/content/videos/my-video.mp4.
Warning
Self-hosted video files can be large. Consider using a video hosting service for better performance.
Frontmatter Fields
Required
| Field | Description |
|---|---|
title | Video title |
Recommended
| Field | Description |
|---|---|
date | Publication date |
description | Video summary |
image | Thumbnail image path |
duration | Video length (e.g., "12:34") |
Media Object (for self-hosted)
media:
name: "file-name" # Filename without extension
author: "Creator Name" # Video creator
collection: "videos" # Collection name
contentType: "video" # Always "video"
contentExtension: "mp4" # File extension
Thumbnails
Add a custom thumbnail image:
---
image: "/images/content/videos/my-video-thumb.jpg"
---
Put the image at public/images/content/videos/my-video-thumb.jpg.
Tip
Use 16:9 aspect ratio thumbnails (e.g., 1280x720) for best results.
Index Style
Control how your video collection index page displays using indexStyle:
| Style | Description |
|---|---|
posts | Card grid with pagination (default) |
content | Renders -index.md body content |
Configure in .astrolock/astrolock.yaml:
collections:
videos:
displayName: "Videos"
contentType: "video"
features:
indexStyle: "posts"
Example: Complete Video Entry
---
title: "Getting Started with Music Production"
date: 2025-01-15T00:00:00Z
author: "Producer Name"
description: "A beginner's guide to setting up your first DAW"
image: "/images/content/videos/music-production-thumb.jpg"
duration: "15:42"
categories:
- Tutorials
tags:
- Beginner
- DAW
- Production
---
In this video, I walk through the basics of setting up your first digital audio workstation.
<Youtube id="abc123def" title="Getting Started with Music Production" />
## Key Topics
- Choosing a DAW
- Audio interface setup
- First project walkthrough
Next Steps
- Learn about Audio Collections for music content
- Explore Image Collections for galleries
- See MDX Components for embedding options