This guide explains how to embed YouTube videos into your layouts. It helps beginners understand that you shouldn't upload raw video files directly to Umbraco (which slows down your site). Instead, you’ll learn how to use a YouTube URL to "stream" content directly into a responsive container that looks great on any device.
The Embed Advantage
In Umbraco 17+ and the uSkinned framework, the Video component acts as a modular "window" to your external content. By utilizing a YouTube URL rather than uploading raw video files—which can significantly slow down your site—the system automatically handles the heavy lifting:
-
Fetches the Thumbnail: No need to upload a separate preview image.
- Built-in Responsiveness: The component ensures your video maintains its correct aspect ratio (16:9 or 4:3) across all devices.
- Optimized Performance: uSkinned is designed to score 100 for performance, and video components are optimized to "initialize" only when needed, keeping initial page load times fast.
Video Settings: Autoplay & Muting
When adding a YouTube video, you have several "Behavior" options in the Settings tab:
-
Standard: The user must click the "Play" button to start.
-
Autoplay: The video starts immediately (Note: Browsers usually require autoplaying videos to be Muted by default).
-
Loop: Once the video ends, it starts again—perfect for background atmosphere or product demos.
-
Show Controls: Decide if you want the YouTube play bar and volume settings to be visible.
[Image showing a video embedded in a responsive web grid layout]
Watch: Adding and Customizing YouTube Videos in Umbraco 17+
This video demonstrates how to use the Video component, toggle playback settings, and even how to use a video as a background for a whole Grid section.
Other Related Tutorials
-
[Tutorial] uSkinned: Using the Video Component
-
[Tutorial] Adding Video Backgrounds to Rows
-
[Tutorial] Embedding Vimeo and Other Providers
-
[Tutorial] Video SEO: Adding Schema for Better Rankings
Action Steps to Insert a YouTube Video
-
Copy the URL: Go to YouTube and copy the link from your browser's address bar (e.g., https://www.youtube.com/watch?v=xxxx).
-
Add the Component: In your Grid Page, click the plus (+) icon and select the Video component.
-
Paste the Link: Enter the URL into the field provided. You should see a preview appear almost instantly.
-
Configure Settings: Click the Settings (cog) if you want to enable Autoplay or hide the YouTube branding.
-
Save and Publish: Click Submit, then Save and Publish to make the video live.
Pro-Tip: If you want to use a video as a background for a section, make sure it is short (15–30 seconds) and doesn't have important audio. Background videos are always muted by browsers, so they should be purely "atmospheric."