Embedded Files
๐ฅณโฏโฏโฏ SitesBuddy v4 is live! Website is currently being updated to match the new workspace. โฎโฎโฎ
by SitesBuddy
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.
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
Google Sites
Report abuse