Youtube Frame Style

➜ 𝗜𝗡𝗦𝗧𝗔𝗟𝗟 𝗖𝗛𝗥𝗢𝗠𝗘 𝗘𝗫𝗧𝗘𝗡𝗦𝗜𝗢𝗡

T

The Styled YouTube Embed Story

So here’s the deal.A while back, a few clients started asking me:“Hey, can you make this YouTube video look like the rest of the site?”
They wanted rounded corners, and a little extra polish to match their website layouts.I thought, “Surely Google Sites has a way to do that…”Spoiler: it doesn’t.The built-in YouTube widget? Super easy to use ... but no borders and round corners. If you ever tried to hunt for custom code to style YouTube video, then you are familiar with this videoWrapper code:<div class="videoWrapper"> <iframe src="video link"> </iframe></div>
This is exactly what I used for years on my WordPress websites.The problem?That code isn’t responsive and doesn’t fit nicely inside a Google Sites embed.So you end up with overflow scrollbars, have to manually resize the iframe, and often get weird empty space in your site’s UI.That’s exactly what I wanted to avoid...SitesBuddy generates code that’s fully responsive and designed specifically for Google Sites embed.

Here’s how it works:

Enter a YouTube URL (The preview updates automatically)
Pick a border color
Fine-tune the border width and corner radius as needed while previewing changes in real time
Click "Copy Code" to get the implementation code
Paste the code into your Google Site embed tool
Adjust the frame
Resize the embed frame in Google Sites to fit your layout - the widget will automatically adjust to the frame size and is fully responsive on all devices.

Boom! ... a video embed that actually matches your design.
But here’s where it gets interesting.
As I tested it, I started noticing a few key trade-offs:⚠️ Iframe embed: Doesn’t support full-screen⚠️ Iframe embed: Sometimes forces YouTube ads (even with ad blockers!)

→ Yep, it’s like "Anti-Adblocker Mode" ... wild, right?

EXAMPLE 1: with yellow border

EXAMPLE 2: with yellow border and round corners

EXAMPLE 3: with black border and round corners

EXAMPLE 4: This it native Google Sites YouTube embed. Notice that it has option for fullscreen.

So here’s the takeaway:

If full-screen matters most, stick with the native widget.
But if you care about styled frames, and a brand-matching look - this tool gives you creative control.Now you’ve got options.And in case you're wondering... yes, I use a mix of both on my own Google Sites.

1. When I want visitors to stay focused and read the content (like in a presentation), I use the styled embed without full-screen.

2. When full-screen matters for the experience (like in a blog post), I use the native YouTube widget.It's all about picking the right tool for the right moment.