Overview
The youtube shortcode is Hugo’s native shortcode for embedding YouTube videos. It provides responsive embedding, lazy loading, privacy controls, and playback customization—all without requiring any additional setup.
FortyTen supports the standard Hugo YouTube shortcode with full flexibility for video ID, timing, and playback options.
Parameters
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
id | string | Yes (positional or named) | — | YouTube video ID (e.g., “0RKpf3rK57I”) |
autoplay | string | No | “false” | Auto-play on page load: “true” or “false” |
controls | string | No | “true” | Show playback controls: “true” or “false” |
allowFullScreen | string | No | “true” | Allow fullscreen mode: “true” or “false” |
loading | string | No | “eager” | Loading behavior: “eager” or “lazy” |
start | string | No | — | Start time in seconds |
end | string | No | — | End time in seconds |
loop | string | No | “false” | Loop playback: “true” or “false” |
mute | string | No | “false” | Mute by default: “true” or “false” |
title | string | No | — | Accessible title (recommended) |
class | string | No | — | CSS class for container styling |
Example
Basic Usage
Simple Embed
Embed a video using just the video ID:
{{< youtube dQw4w9WgXcQ >}}
Named Parameter
Use explicit parameter name:
{{< youtube id="dQw4w9WgXcQ" >}}
With Title (Accessible)
Always include a meaningful title:
{{< youtube id="dQw4w9WgXcQ" title="Music Video" >}}
Responsive Embed
Make the video adapt to screen size:
{{< youtube id="dQw4w9WgXcQ" class="responsive-video" >}}
Advanced Examples
Video with Specific Start Time
Start playback at a specific timestamp (in seconds):
{{< youtube id="dQw4w9WgXcQ" start="45" >}}
Play Specific Segment
Play only a portion of the video (start to end in seconds):
{{< youtube id="dQw4w9WgXcQ" start="30" end="120" >}}
Autoplay with Mute
Auto-play requires muting for user experience:
{{< youtube id="dQw4w9WgXcQ" autoplay="true" mute="true" >}}
Without Controls
Embedded background video without player controls:
{{< youtube id="dQw4w9WgXcQ" controls="false" autoplay="true" mute="true" loop="true" >}}
Lazy Loading for Performance
Load video only when user scrolls into view:
{{< youtube id="dQw4w9WgXcQ" loading="lazy" >}}
Special Features
Lazy Loading
Set loading="lazy" to defer video loading until the video is visible. Great for pages with many videos or when users might not scroll to all content.
{{< youtube id="dQw4w9WgXcQ" loading="lazy" >}}
Segment Playback
Combine start and end to highlight a specific portion:
{{< youtube id="dQw4w9WgXcQ" start="10" end="60" title="Tutorial Intro" >}}
Privacy Mode
By default, YouTube embeds load minimal data. Hugo’s default implementation respects privacy preferences—the iframe uses the no-cookie YouTube domain.
Accessibility Considerations
Always Include a Title
Provide context for screen readers and users previewing the page:
{{< youtube id="dQw4w9WgXcQ" title="You will like it!" >}}
Finding YouTube Video IDs
From the URL
- Open the video on YouTube
- Look at the URL:
https://www.youtube.com/watch?v=dQw4w9WgXcQ - The ID is the value after
v=— in this case:dQw4w9WgXcQ
From Share Button
- Click “Share” on the YouTube video
- Copy the short link (e.g.,
https://youtu.be/dQw4w9WgXcQ) - Extract the ID after the last slash:
dQw4w9WgXcQ
From Embed Code
- Click “Share” → “Embed”
- Find the
srcattribute:https://www.youtube.com/embed/dQw4w9WgXcQ - Extract the ID:
dQw4w9WgXcQ