Are you struggling to embed YouTube Shorts on your website in a way that looks great both on desktop and mobile? In this quick guide, I'll show you exactly how to make YouTube Shorts appear perfectly on your site, without unwanted framing or scaling issues.
🌟 Steps to Add Google Analytics on Systeme.io:
1. Identify the Problem: Understand the common issues with embedding YouTube Shorts, like improper scaling and framing.
2. Consult ChatGPT for Code: I asked ChatGPT for a mobile-responsive YouTube Shorts embed code.
3. Using Website Builder (e.g. Systeme.io): Since some builders like Systeme.io don’t have a native Shorts embed option, you'll need to use raw HTML.
4. Embed the Code: Copy the provided code into the raw HTML section of your website builder.
5. Adjust for Mobile: Modify the margins and padding to ensure the Shorts look great on mobile devices.
💻 See it in Action: Follow the video to see how it seamlessly integrates a YouTube Short into the website, ensuring it fits perfectly on both desktop and mobile screens.
🔗 Get the Code: Want to embed YouTube Shorts on your site just like I did? Copy the exact code I used in this tutorial below.
As a thank you for stopping by, here's a 30% discount to upgrade/start Systeme.io:
*This post contains affiliate links. If you choose to purchase through one of our links, as an Amazon Associate, we'll earn a commission at no extra cost to you.
🖥️ The Exact Code I Used
*Remember to replace my video with yours. There's a spot where it says: "Replace 'YKTFZq-DRq4' with your YouTube video code ID"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive YouTube Embed with Shadow and Rounded Corners</title>
<style>
.youtube-container {
position: relative;
width: 100%;
padding-bottom: 177.77%; /* Aspect ratio for 9:16 */
overflow: hidden;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); /* Hard shadow border */
border-radius: 5px; /* Rounded corners */
}
.youtube-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5px; /* Rounded corners for iframe */
}
</style>
</head>
<body>
<div class="youtube-container">
<!-- Replace 'YKTFZq-DRq4' with your YouTube video code ID -->
<iframe src="https://www.youtube.com/embed/YKTFZq-DRq4" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>Full Transcript
How to install Google Analytics as Systeme.io, so you can track page insights like this: First, go to analytics.google.com to create an account. Once your account is created, go down to the left-hand bar and go all the way down, and click on "Admin". In the top left, select "Create" and hit "Property". Type in the name of your property and then select "Next". Don't worry about the advanced settings. Add details about your business, and then select "Next". Select your business objective, and then hit "Create". Then, since we're adding to Systeme.io, select "Web" as their platform. Type in your website URL, website name, and then this is all of the stuff you'll have access to. You can be specific about what you want or don't want. I left everything on and hit "Create Stream". Once created, it's going to suggest that you add it to the website. That doesn't work; go to install "Manually". It'll give you this tag. Hit the copy button. Then, there will be two places you'll want to add it on your Systeme.io account. For sales funnels, go to the top right-hand corner when you're logged in, hit "Settings", and then go over to "Sales Funnel" on the left-hand side, and then paste in that tracking ID that you just created, and then hit "Save". Then, if you're creating a blog with all these pages and websites, go to "Blogs", then "Blog Layout", hit "Settings" in the top left-hand corner, go all the way down, edit header code, and then drop the tag in there, and make sure you hit "Save". Then, save the changes in the top right. Now, if you have a page on your website that does not use the blog layout because you've chosen not to do that, you'll just want to make sure to go into that page (it won't have the check mark) and then do the same thing: "Settings", edit header code, and then drop in the tag, and you'll be good to go. And that’s...
Subscribe
Share with a Friend
Level Up (Weekly)
Receive top insights you can enjoy in 5 minutes.
About Rosales Recommendations
Justin & Megan Rosales started this business to help people find time and money to practice their passions. Before officially starting, they committed to giving away 90% of any take-home profit.
🙋🏼♀️ Megan is using her 20 years of leadership and both her Cornell Diversity, Equity, & Inclusion and John Maxwell Leadership Consulting certifications to invest in new leaders, building healthy cultures, and making the world a better place to work. Check out her podcast here.
🙋🏻♂️ Justin is using his Six Types of Working Genius Certification and 15 years of building communities, systems, trainings, and digital products online & in person to help people become financially free to do what they feel called to do.
📘 Here's Justin's free 7-page eBook on more of their story, why they're giving away 90% of the take-home profit from the business, and how you can start building a business to fuel your dreams too.
Make Money Online
Embrace the best time to turn your skills into profit with our
free step-by-step guide.
Weekly insights you can enjoy in 5 minutes.
Add the free Practice Your Passion Newsletter to your inbox.
How to Make Money Online
Embrace the best time to turn your skills into profit.
