## Video Media Type

Product: Monogram - Personal Portfolio WordPress Theme
URL: https://hub.jkdevstudio.com/docs/monogram/content-management/video-media-type
Updated: 2026-08-19

The **Video** media type lets you feature a video as the primary visual for a portfolio project. The theme supports three sources: self-hosted files, YouTube, and Vimeo - they all use the same set of player controls.

## Setting Up a Video

1. Open your portfolio item and go to the **Media** tab
2. Set **Primary Media Type** to **Video**
3. Choose a **Video Source**: Self-hosted, YouTube, or Vimeo
4. Provide the source - upload a file or paste a URL (see the table below)
5. Optionally upload a **Video Poster Image** - shown before playback starts
6. Tune the four player toggles to match how the video should behave

## Video Source

<table> <thead> <tr> <th>Source</th> <th>What to Provide</th> <th>Notes</th> </tr> </thead> <tbody> <tr> <td><strong>Self-hosted</strong></td> <td>Upload an MP4 (H.264) or WebM file</td> <td>Full control, no third-party branding. Uses your bandwidth.</td> </tr> <tr> <td><strong>YouTube</strong></td> <td>Paste any standard YouTube URL</td> <td><code>youtube.com/watch?v=…</code>, <code>youtu.be/…</code>, <code>youtube.com/embed/…</code>, and <code>youtube.com/shorts/…</code> are all accepted. The theme uses <code>youtube-nocookie.com</code> for a privacy-friendly embed.</td> </tr> <tr> <td><strong>Vimeo</strong></td> <td>Paste any Vimeo URL</td> <td><code>vimeo.com/…</code>, channel/showcase URLs, and <code>player.vimeo.com/video/…</code> are all accepted. DNT (Do Not Track) is on by default.</td> </tr> </tbody> </table>

> **Tip:** For YouTube and Vimeo, the theme extracts the video ID from the URL automatically - you do not need to find or build an embed link manually.

## Player Controls

Four toggles let you tune how the video plays back. They apply consistently across all three sources.

<table> <thead> <tr> <th>Toggle</th> <th>Default</th> <th>Behavior</th> </tr> </thead> <tbody> <tr> <td><strong>Autoplay</strong></td> <td>On</td> <td>Starts the video as soon as it appears. Browsers block autoplay with sound, so combine with <strong>Muted</strong> for it to actually start.</td> </tr> <tr> <td><strong>Muted</strong></td> <td>On</td> <td>Starts the video with audio muted. Required by most browsers for autoplay to work.</td> </tr> <tr> <td><strong>Loop</strong></td> <td>On</td> <td>Replays the video continuously when it ends.</td> </tr> <tr> <td><strong>Show Player Controls</strong></td> <td>Off</td> <td>Shows play/pause/scrub controls. Disable for an immersive ambient-loop look.</td> </tr> </tbody> </table>

## Video Poster Image

The **Video Poster Image** is a static frame shown before the video loads. It is **required** for self-hosted videos and used as the card thumbnail in portfolio grids. For YouTube and Vimeo, the platform serves its own poster, so the field is optional.

## How the Video Renders

### On Single Project Pages

The hero video uses the toggles you set above:

- Self-hosted videos render as an HTML5 `<video>` element with your chosen attributes
- YouTube and Vimeo render as a privacy-respecting `<iframe>` with the same options applied via embed parameters
- All three respect responsive sizing and adapt to the chosen single page layout style

### On Portfolio Archive Cards

Video projects display a **play button overlay** on the card thumbnail. Clicking the button opens the video in a lightbox with full controls - regardless of the **Show Player Controls** toggle on the project itself.

## Best Practices

### Self-hosted

- **Use MP4 (H.264) for widest browser compatibility.** WebM is a good alternative for smaller file sizes but has less universal support.
- **Compress your video before uploading.** Use HandBrake or FFmpeg to reduce file size. Aim for under 20MB.
- **Always set a poster image.** Without one, visitors see a blank frame until the video loads.
- **Match the poster dimensions to your video.** A 1920x1080 video deserves a 1920x1080 poster to avoid layout shifts.
- **Keep videos short.** Project showcase videos work best at 15-60 seconds.

### YouTube and Vimeo

- **Use unlisted videos** if the project is portfolio-specific and you do not want it surfacing in YouTube search results.
- **Disable end screens and suggestions** in YouTube Studio for a cleaner viewing experience.
- **Keep the URL clean.** Both extractors handle tracking parameters fine, but a clean URL is easier to maintain.
- **Test region restrictions.** YouTube and Vimeo can block playback in certain countries - confirm your audience can see the video.

> **Warning:** Large self-hosted video files significantly increase page load time. Always compress your videos and test page speed after uploading. If the file exceeds 20MB, consider switching to YouTube or Vimeo - they handle streaming and bandwidth.

> **Info:** The featured image in the WordPress sidebar is used as the card thumbnail in portfolio grids when no Video Poster Image is set, or when you use a YouTube/Vimeo source without uploading a poster.