> For the complete documentation index, see [llms.txt](https://docs.themeupstudio.com/travio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeupstudio.com/travio/custom-pages/videos-page.md).

# Videos Page

Live preview: <https://travio.themeupstudio.com/videos/>

This guide explains how the Videos page works, what drives its content, and how to customize it.

### Route and Template

* URL: `/videos/`
* Route source: `routes.yaml`
* Template file: `videos.hbs`
* Controller: `channel`
* Built-in route filter: `tag:hash-video`
* Page data source: `data: page.videos`

Create a Ghost page with slug `videos` so page header/title content can render correctly.

<div data-with-frame="true"><figure><img src="/files/yCXCvqFjNmDUX32Ano4Z" alt=""><figcaption><p>Videos page content source</p></figcaption></figure></div>

***

### How Videos Are Selected

Travio videos page is powered by Ghost’s internal tag filter:

* Route filter is `tag:hash-video`
* In Ghost Admin, this means post must be tagged with internal tag `#video`

If a post is not tagged `#video`, it will not appear in `/videos/`.

***

### What the Videos Page Includes

* Page header (from `page.videos`)
* Filter panel
  * Destination filter
  * Experience filter
* Video card grid (wide card layout)
* Empty-state message when no cards match selected filters
* Pagination / Load More behavior
* Bottom CTA section

***

### Settings That Control Videos Page

#### Theme Custom Settings (Customize → Theme → Site Wide)

`destinations`:

* Comma-separated destination tag slugs
* Controls destination filter options shown on videos page

`experiences`:

* Comma-separated experience tag slugs
* Controls experience filter options shown on videos page

#### Code Injection: filter visibility

Use `window.TRAVIO_CONFIG.filters.visibility.videos` to control which filter groups appear.

Example:

```javascript
window.TRAVIO_CONFIG = {
  filters: {
    visibility: {
      videos: {
        destination: true,
        experiences: true
      }
    }
  }
};
```

If both are disabled, the filter panel is hidden on videos page.

<div data-with-frame="true"><figure><img src="/files/cEz7GlBupg13LgdYg0YQ" alt=""><figcaption><p>Videos page filter controls</p></figcaption></figure></div>

***

### Video Card Behavior

Videos page uses wide post cards (`card-post-wide`) with video-aware behavior.

For posts tagged `#video`:

* Theme tries to load preview media via Ghost Content API.
* If preview media is available, video preview can replace/fallback from static image.
* If API/media fetch fails, card falls back to feature image or placeholder.

***

### API Requirements for Best Video UX

For advanced video preview/filter behavior, set a valid Content API key:

```javascript
window.TRAVIO_CONFIG = {
  contentApiKey: "YOUR_CONTENT_API_KEY"
};
```

Without valid API config:

* Core videos listing still works (route-level `#video` filter)
* Some enhanced dynamic behaviors may degrade gracefully and use fallback images

***

### Filtering Logic on Videos Page

* Category filters use tags from your destination/experience custom setting lists.
* Users can select multiple filters.
* Filter panel visibility follows `filters.visibility.videos`.
* Clear filter button resets active selections.
* Summary text updates (showing visible/total).

***

### Pagination and “Load More”

Videos page supports load-more behavior with videos-specific text:

* Active button end-state text is customized to “No more videos”
* Filtering integrates with paginated content loading logic
* Empty-state message appears when no videos match selected filters

***

### Related Post-Level Behavior

For single post pages (`post.hbs`):

* Any post tagged `#video` automatically uses Video Hero layout.
* This is independent of default post hero setting.

So `#video` controls both:

* Inclusion in `/videos/`
* Hero style on single post pages

***

### Content Publishing Best Practices for Videos

For each video post:

* Add internal tag `#video`
* Add destination/experience public tags if you want it filterable on videos page
* Add a strong feature image as fallback thumbnail
* Ensure embedded/self-hosted video content is valid and accessible

This gives best results in both listing and single-post contexts.

***

### Common Issues

* Post not showing on `/videos/`: missing `#video` internal tag.
* Filters empty: `destinations` / `experiences` setting slugs don’t match real tags.
* Video previews not appearing: missing/invalid Content API key or unavailable media.
* Header data missing: videos page slug not created.
* No results too often: filters are too restrictive for current video library.