Type something to search...

Video Collections

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

FieldDescription
titleVideo title
FieldDescription
datePublication date
descriptionVideo summary
imageThumbnail image path
durationVideo 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:

StyleDescription
postsCard grid with pagination (default)
contentRenders -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