What it is
An iframe is a way of embedding one webpage's content inside another — it's what makes it possible to drop a YouTube video, a Google Map, or a third-party widget directly onto your own page without building that functionality yourself. Most embed codes you copy and paste from these services come with a fixed pixel width and height already set, sized for a typical desktop screen.
This check looks at whether embedded iframes on a page are set up to resize along with the screen ("responsive"), or whether they're left at that original fixed size regardless of the visitor's actual screen width.
Why it matters
A map or video embedded at a fixed 560×315 pixel size, for example, works fine on a desktop screen but can easily be wider than an entire phone screen, forcing the same kind of horizontal scrolling or getting visually cut off entirely. This is a common, easy-to-overlook problem specifically because the embed code usually comes pre-written by the platform (YouTube, Google Maps) exactly as pasted, with no obvious indication that it needs any further adjustment for mobile use.
A broken embed is also disproportionately noticeable compared to a small text issue — a map that's cut in half or a video player that overflows the screen is immediately, visually obvious to any visitor who scrolls to that part of the page on their phone.
How to fix it
- Identify every embedded iframe on your site — commonly videos, maps, or third-party widgets — and check how they display on an actual phone.
- Wrap the iframe in a container styled to control its width as a percentage, with the iframe itself set to fill that container (
width: 100%) rather than using its original fixed pixel width. - For YouTube embeds specifically, a common approach is a wrapper with a fixed aspect ratio (like 16:9) that scales the video proportionally at any screen width — many free code snippets are available for this exact pattern.
- If you're using a website builder, check whether it has a built-in "embed" or "video" block instead of raw iframe code — these are usually already responsive by default.
- Re-check the embed on a phone afterward to confirm it resizes properly instead of overflowing.