Embedding Your Showreel
After this, you'll be able to embed a video showreel that plays cleanly on your portfolio, choose the right hosting platform for your situation, and fix the three most common embedding mistakes.
Before you start
Complete Briefing Claude to Build Your Portfolio first; this lesson builds on the HTML file you generated.
The idea
Vimeo, embedded with the right parameters, keeps a creative director on your portfolio; YouTube's default embed sends them to other creators' videos and signals hobbyist. The showreel is the first thing a creative director sees and the last thing they remember. How it loads and plays is as important as what is in it. Most freelancers default to YouTube because it is free, but YouTube can show related videos from other creators after your reel ends and displays YouTube branding throughout: the logo, the progress bar, the suggested videos. To senior buyers who see hundreds of portfolios, that can signal hobbyist. Vimeo is the professional standard for many creative portfolios: viewer stays on your site, and current paid plans may add analytics so you can see whether a creative director watched your reel before you follow up.
Here is the before and after: A YouTube embed (a small block of code that drops the video player into your page) with default settings ends with a grid of other creators' videos and YouTube's red logo over your work. A Vimeo embed with the four parameters in the exercise below (responsive width, a 16:9 ratio, no autoplay with sound, no related videos) ends cleanly, keeping the viewer on your portfolio. The embed code is the same short snippet either way; only the parameters differ.
Now try it: run the exercise prompt below with your Vimeo or YouTube URL, specify the four embed parameters (responsive width, 16:9 ratio, no autoplay with sound, no related videos), and ask Claude to tell you exactly where in your HTML file to paste the result. Test the URL in incognito before embedding: a private video shows a lock icon instead of your reel.
Try it (8 min)
Watch out for
- Using a private Vimeo link. Private links show a lock icon instead of your video. Set the video to 'Anyone with the link' or 'Public' in Vimeo settings first
- Using the full YouTube URL instead of the embed URL. YouTube embeds use youtube.com/embed/VIDEO_ID, not youtube.com/watch?v=VIDEO_ID
- Autoplay with sound. Browsers block this and it produces a confusing broken experience; always set muted=1 if you want autoplay
- Forgetting responsive width. A fixed-width embed looks broken on mobile; use width='100%' and a padding-based aspect ratio container
- Embedding a 10-minute reel. Creative directors decide in 30 seconds; your embed should be your 60-second highlight cut, not your full reel
Paste this into Claude
[Paste your Portfolio Brief here: the paragraph you wrote in Lesson 0] --- I have a portfolio HTML file you helped me build. I want to make sure the showreel section is embedded correctly. My showreel URL is: [your Vimeo or YouTube URL] My hosting platform: [Vimeo / YouTube / Cloudflare Stream / other] Please give me the correct iframe embed code for this video with these settings: - Does NOT autoplay automatically when the page loads - Does NOT show related videos or third-party branding at the end - Has a responsive width (fills its container on any screen size) - Has a 16:9 aspect ratio - Shows player controls so viewers can pause and scrub Then tell me exactly where in my HTML file I should paste this code: what line to look for, and what to replace. Also tell me: for my type of work, is there a reason to upgrade to a paid Vimeo plan rather than using the free tier?
What good looks like
- The embed code Claude returned is a complete iframe block, not just a URL
- The video plays when you click the play button on your portfolio
- The player fills the section width on desktop
- No YouTube recommendations or Vimeo logo appears over your video while it plays
- You confirmed the video URL works in an incognito browser window before embedding
When this breaks
- Breaks when the Vimeo or YouTube privacy settings are wrong. Always test the URL in incognito first; this takes 30 seconds and prevents the most common embedding failure
- Breaks when the HTML file has no clear showreel section for Claude to target. If Claude says it cannot find where to put the embed, ask it: 'Add a clear comment label above my showreel section, then add the embed there'
AI can help with this
Use Claude or your build tool to help you you can embed a video showreel that plays cleanly on your portfolio, choose the right hosting platform for your situation, and fix the three most common embedding mistakes. Start with the exercise prompt and your real input. Ask for one draft, then check it against this proof: The embed code Claude returned is a complete iframe block, not just a URL. Accept only the version you can verify yourself.
You can now
The embed code Claude returned is a complete iframe block, not just a URL
- The video plays when you click the play button on your portfolio
- The player fills the section width on desktop
- No YouTube recommendations or Vimeo logo appears over your video while it plays
- You confirmed the video URL works in an incognito browser window before embedding
Key takeaways
Vimeo is the professional standard. The embed parameters that matter are responsive width, 16:9 ratio, no autoplay with sound, no related videos at the end. Upgrade to Vimeo Starter when you want analytics. Always test your video URL in incognito before embedding.
- Vimeo removes branding and keeps viewers on your site. YouTube sends them away.
- Vimeo Starter (~$12/month) gives you analytics: you can see if the creative director watched your reel.
- Test your video URL in incognito before embedding. Private links show a lock icon.
- Autoplay without muted is blocked by all major browsers. If you want autoplay, add muted=1.
- Your embed should be your 60-second highlight cut, not your full reel.