YouTube Frame Style for Google Sites

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:

1. Enter a YouTube URL

   The preview updates automatically

2. Pick a border color

   Choose a color that matches your site's branding.

3. Fine-tune the border width and corner radius

   Adjust settings while previewing changes in real time.

4. Click "Copy Code" to get the implementation code

   The code is automatically copied to your clipboard.

5. Paste the code into your Google Site embed tool

   Use Insert > Embed to add your styled video.

Boom! ... a video embed that actually matches your design.

Important Trade-offs to Consider

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?

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.

Great for:

• Product demos and walkthroughs
• Tutorial videos that match your brand aesthetic
• Testimonial videos embedded in branded layouts
• Educational content where viewers should stay on the page
• Video portfolios with consistent styling

SHARE

Watch this video to see how easy it is to create stylish YouTube embeds that match your Google Site's design using SitesBuddy.

EXAMPLES