Videos increase engagement and help explain complex topics. Learn how to embed YouTube/Vimeo videos, upload your own videos, and optimize for best performance.

Easiest and most performant option. YouTube handles hosting, streaming, and player controls.

How to embed:

Example prompt:

"Embed this YouTube video on the /about page: https://youtube.com/watch?v=VIDEO_ID. Place it below the team section, make it responsive and centered."

Or use video ID:

"Add a YouTube video embed with ID 'dQw4w9WgXcQ' to the hero section. Make it 16:9 aspect ratio and responsive."

Great for professional videos with customizable player.

Example prompt:

"Embed this Vimeo video: https://vimeo.com/123456789 on the product demo page. Remove Vimeo logo and controls, autoplay on mute."

Upload your own video files directly. Use sparingly—videos are large files.

When to self-host:

Recommended specs for self-hosted:

Prompt:

"Add a video background to the hero section. Video should autoplay on mute, loop continuously, and have a dark overlay so text remains readable. Use this video URL: https://mysite.com/hero-video.mp4"

Best practices for background videos:

Prompt:

"Add a product demo section to /products page. Embed YouTube video 'ABC123' on the left (16:9, 560px wide), with product description text on the right. Make it responsive - stack vertically on mobile."

Prompt:

"Create a video gallery on /tutorials page with 6 YouTube videos in a 3-column grid. Show video thumbnail, title, and duration. Videos should open in lightbox when clicked."

Prompt:

"Add a testimonials section with 3 customer video testimonials. Use Vimeo embeds in cards, 3 columns on desktop, 1 column on mobile. Include customer name and company below each video."

Make sure videos look good on all screen sizes.

Responsive YouTube embed:

"Make the YouTube embed responsive - maintain 16:9 aspect ratio, scale to fit container width, no scrollbars."

Different videos for mobile/desktop:

"Show the full product demo video (10 minutes) on desktop, but show the 90-second highlight version on mobile devices."

Autoplay (muted):

"Make the YouTube video autoplay on mute. User can unmute if they want."

Hide controls:

"Hide YouTube player controls and branding. Video should look cleaner."

Start at specific time:

"Embed YouTube video but start at 1:30 (1 minute 30 seconds in)."

Loop video:

"Make the YouTube video loop continuously."

Prompt:

"Add a custom video player with my branding. Include play/pause button, progress bar, volume control, and fullscreen option. Use this video: videos/demo.mp4"

Don't load videos until user scrolls to them.

Enable lazy loading:

"Add lazy loading to all videos on the page. Videos should only load when they come into view."

Benefits:

Show a thumbnail instead of loading the full video player.

Prompt:

"For the YouTube embed, show a custom thumbnail image first. When user clicks it, load and play the video. This saves bandwidth and loads faster."

Benefits:

Make videos accessible to deaf/hard-of-hearing users.

YouTube: Upload captions in YouTube Studio

Self-hosted: Add WebVTT caption files

Prompt for self-hosted captions:

"Add closed captions to the video player. Use this captions file: captions.vtt. Users should be able to toggle captions on/off."

Add text transcript:

"Below the video, add a 'Show Transcript' button that expands to show the full text transcript of the video. Good for SEO and accessibility."

Help search engines understand your videos.

Prompt:

"Add video schema markup to the product demo video. Include title, description, thumbnail URL, upload date, and duration. This helps Google show the video in search results."

Prompt:

"Generate a video sitemap that lists all videos on the site with metadata (title, description, thumbnail, URL). This helps Google index our videos."

Prompt:

"Add a 'Meet the Team' section to /about page. Embed YouTube video 'XYZ789' at the top, centered, 720px wide. Below the video, show team member photos in a grid. Make video responsive."

Prompt:

"Create a tutorials page at /tutorials with a grid of YouTube videos. Each video card shows thumbnail, title (from YouTube), view count, and duration. Filter buttons at top: 'All', 'Beginner', 'Advanced'. Videos load with lazy loading."

Prompt:

"Create a landing page with full-screen video hero section. Video backgrounds should autoplay on mute, loop, have dark overlay (40% opacity). Headline and CTA button should be centered over the video. On mobile, show a static background image instead of video."

YouTube:

Vimeo:

Self-Hosted:

Browsers block autoplay with sound. Solution: Autoplay with mute. Tell the AI: 'Make video autoplay on mute. User can unmute if they want.' Sound autoplaying is blocked for good reason (user experience).

Use lazy loading! Also consider using YouTube/Vimeo instead of self-hosting. If you must self-host, compress the video heavily. Try to keep videos under 5MB. Use poster images (thumbnails) that load first.

Not recommended. Large videos hurt performance. Either: 1) Upload to YouTube/Vimeo, then embed. 2) Compress the video (use Handbrake, aim for under 10MB). 3) Split into shorter segments. Remember—users on mobile data!

Check video format. Safari needs MP4 with H.264 codec. Also, autoplay only works if muted. Test on actual device, not just browser dev tools.

Use lazy loading! Videos outside viewport shouldn't load. Also use thumbnail images that load the video player onclick. For many videos, definitely use YouTube/Vimeo embeds—they're optimized for this.

If using Vimeo Pro, yes. For YouTube, make video 'Unlisted' (not in search, only those with link can view). For self-hosted, you'd need authentication on your site—tell AI: 'Only show video if user is logged in.'

See also: Using Images | Performance Optimization

Need help? Contact Support