The user wants a 2026 blog post about why autoplaying video is usually cropped on a narrow mobile viewport. I need to act as a senior SEO + AEO content strategist for NetSixtySix Mobile QA.
Constraints:
- Output ONLY valid JSON with keys: title, meta_description, slug_suggestion, html, faqs.
- html = article body using h2/h3/p/ul/li/strong/em/a/br only — do NOT include any FAQ section in html.
- faqs = array of exactly 3 unique {question, answer} objects.
- No markdown fences.
- Length: 800-1200 words of body text.
- Title: clear search intent, compelling, not clickbait spam.
- Meta description: 145-160 characters, includes primary intent.
- Open with a direct answer/summary in the first 2 paragraphs.
- Scannable H2/H3 structure, at least 2 lists, practical steps.
- 3 unique FAQs ONLY in faqs JSON array (never in html).
- Mention NetSixtySix Mobile QA naturally once.
- Avoid overlapping angles with existing posts listed.
- Original, plagiarism-free, year-fresh examples.
- E-E-A-T: specific, actionable, year-fresh examples.
- Optimized for Google search and answer engines (AI Overviews / featured snippets / People Also Ask).
- Audience: founders, marketers, agencies worldwide shipping mobile web experiences.
- Focus on mobile layout QA, conversion blockers, overflow, and Playwright-based audits.
Let me plan the article structure:
Title idea: "Why Autoplaying Video Gets Cropped on Narrow Mobile Viewports (And How to QA It in 2026)"
Or: "Autoplaying Video Cropped on Mobile? Why Narrow Viewports Break Your Hero Video in 2026"
Meta description: 145-160 chars. Must include primary intent (autoplay video cropped mobile viewport).
Example: "Autoplaying video cropped on mobile? Learn why narrow viewports cut off hero videos and how to QA them with Playwright in 2026." Let's count: that's around 140. Need 145-160.
Body structure:
- Opening direct answer (first 2 paragraphs): Explain that autoplaying video is cropped because CSS object-fit: cover combined with fixed aspect ratios and viewport height/width constraints cause the browser to fill the container, clipping edges on narrow screens. Also mention viewport units (vh/vw) and safe areas.
- H2: The Root Cause: Aspect Ratio vs. Viewport Shape
- H3: How object-fit: cover works on narrow screens
- H3: Viewport units and dynamic toolbars
- H2: Why Autoplay Makes It Worse (conversion blocker, silent playback, attention)
- H2: Real 2026 Example (specific, year-fresh)
- H2: How to QA Autoplay Video Cropping (practical steps, Playwright-based)
- H2: Fixes That Don't Break Design (object-fit: contain, poster, aspect-ratio, media queries)
- H2: Checklist before publishing
Lists: at least 2. One bulleted list of causes, one numbered list of QA steps.
Mention NetSixtySix Mobile QA naturally once. Maybe in the QA section or conclusion.
Word count: 800-1200 words body text. I need to write substantial content.
Let's draft carefully to avoid overlapping with existing posts:
- Not about chat widget, hero banner below 400px (though related, focus is video specifically), sticky header, pricing table, image aspect ratios (different topic), mega-menu, keyboard, fixed footer, zoom, horizontal scrolling, nav audit, layout shifts. So I must focus strictly on autoplaying video cropping due to narrow viewport, CSS containment, object-fit, viewport units, and Playwright testing.
Key technical points:
1. `object-fit: cover` tells the browser to fill the entire container while maintaining aspect ratio, cropping the excess. On a narrow portrait viewport, if the container is forced to be wide (e.g., `width: 100vw`) and tall (e.g., `height: 50vh`), the video's native aspect ratio (say 16:9) doesn't match, so sides get cut off.
2. Many teams set hero video containers to `height: 100vh` or `height: 80vh` and `width: 100%`. On iOS Safari, dynamic toolbars change viewport height, causing reflows and unexpected cropping.
3. Autoplay policies often require muted video, but the visual cropping happens regardless of audio.
4. `overflow: hidden` on the parent hides the cropped parts, making it look intentional but broken.
5. Narrow viewports (e.g., iPhone SE at 375px width) exacerbate this because there's less horizontal room to letterbox.
Playwright QA steps:
- Set viewport to 375x812 (iPhone 12/13/14) and 390x844.
- Use `page.setViewportSize`.
- Check `video` element bounding box vs parent container.
- Screenshot compare.
- Check `object-fit` computed style.
- Test with dynamic toolbar (hard in Playwright, but can approximate with different viewport heights).
- Check for horizontal overflow.
Word count target: ~1000 words.
Let's write the HTML. Only h2/h3/p/ul/li/strong/em/a/br. No h1 (title is in JSON). No FAQ section in html.
Let's draft:
Paragraph 1 (direct answer): Autoplaying video is usually cropped on a narrow mobile viewport because the container is told to fill the screen while the video keeps its original aspect ratio. CSS rules like object-fit: cover force the browser to scale the video until one dimension matches the container, then cut off whatever overflows. On a 375-pixel-wide phone, that overflow is almost always the left and right edges of the video frame.
Paragraph 2: The result is a hero video that looks fine on a desktop monitor but decapitates speakers or cuts off product details on an iPhone SE. Because the video autoplays, users see the broken frame immediately, before they can scroll or interact. This is a layout QA issue, not a video encoding problem, and it shows up in conversion data as higher bounce rates on mobile landing pages.
H2: Why Narrow Viewports Crop Autoplay Video
H3: The object-fit: cover trap
... explanation ...
H3: Viewport units and dynamic browser toolbars
... explanation ...
H3: Overflow: hidden hides the evidence
... explanation ...
List 1 (bulleted): Common CSS patterns that cause cropping:
- width: 100vw with height: 60vh on the video wrapper
- object-fit: cover on the tag
- position: absolute; inset: 0 on the video inside a relative hero
- min-height: 100vh on a section containing the video
H2: What Makes Autoplay Particularity Painful on Mobile
... talk about muted autoplay, first impression, LCP, CLS ...
List 2 (numbered): Practical QA steps using Playwright
1. Launch Chromium with a narrow viewport...
2. Navigate to the URL...
3. Locate the video element...
4. Compare bounding boxes...
5. Check computed styles...
6. Capture screenshots...
7. Test multiple device emulations...
H2: How to Fix Cropped Autoplay Video Without Removing It
- Use object-fit: contain with a background color
- Set aspect-ratio on the wrapper
- Use media queries to switch to poster image below 480px
- Avoid fixed vh heights; use min-height with flexible units
- Add `playsinline` and `muted` for iOS Safari autoplay compliance
Mention NetSixtySix Mobile QA naturally: "At NetSixtySix Mobile QA, we audit these exact overflow conditions..." or similar.
Conclusion H2: Pre-Publish Checklist for Mobile Video
List.
Now meta description 145-160 chars.
Draft: "Autoplaying video cropped on mobile? Learn why narrow viewports clip hero video and how to audit it with Playwright in 2026."
Count: Autoplaying video cropped on mobile? Learn why narrow viewports clip hero video and how to audit it with Playwright in 2026.
Let's count characters:
A-u-t-o-p-l-a-y-i-n-g (11) space (12) v-i-d-e-o (17) space (18) c-r-o-p-p-e-d (25) space (26) o-n (28) space (29) m-o-b-i-l-e (35) ? (36) space (37) L-e-a-r-n (42) space (43) w-h-y (46) space (47) n-a-r-r-o-w (53) space (54) v-i-e-w-p-o-r-t-s (64) space (65) c-l-i-p (69) space (70) h-e-r-o (74) space (75) v-i-d-e-o (80) space (81) a-n-d (84) space (85) h-o-w (88) space (89) t-o (91) space (92) a-u-d-i-t (97) space (98) i-t (100) space (101) w-i-t-h (105) space (106) P-l-a-y-w-r-i-g-h-t (117) space (118) i-n (120) space (121) 2-0-2-6 (125) . (126)
126 chars. Too short. Need 145-160.
Add more: "Autoplaying video cropped on mobile? Learn why narrow viewports clip hero video and how to audit overflow with Playwright in 2026."
Count previous 126, replace "it" with "overflow" adds 6 chars = 132. Still short.
Add "for founders and marketers" maybe.
"Autoplaying video cropped on mobile? Learn why narrow viewports clip hero video and how to audit overflow with Playwright in 2026 for mobile teams."
Let's count carefully:
Autoplaying video cropped on mobile? Learn why narrow viewports clip hero video and how to audit overflow with Playwright in 2026 for mobile teams.
1 Autoplaying = 11
2 space = 1
3 video = 5 -> 17
4 space = 1 -> 18
5 cropped = 7 -> 25
6 space = 1 -> 26
7 on = 2 -> 28
8 space = 1 -> 29
9 mobile? = 7 -> 36
10 space = 1 -> 37
11 Learn = 5 -> 42
12 space = 1 -> 43
13 why = 3 -> 46
14 space = 1 -> 47
15 narrow = 6 -> 53
16 space = 1 -> 54
17 viewports = 9 -> 63
18 space = 1 -> 64
19 clip = 4 -> 68
20 space = 1 -> 69
21 hero = 4 -> 73
22 space = 1 -> 74
23 video = 5 -> 79
24 space = 1 -> 80
25 and = 3 -> 83
26 space = 1 -> 84
27 how = 3 -> 87
28 space = 1 -> 88
29 to = 2 -> 90
30 space = 1 -> 91
31 audit = 5 -> 96
32 space = 1 -> 97
33 overflow = 8 -> 105
34 space = 1 -> 106
35 with = 4 -> 110
36 space = 1 -> 111
37 Playwright = 10 -> 121
38 space = 1 -> 122
39 in = 2 -> 124
40 space = 1 -> 125
41 2026 = 4 -> 129
42 space = 1 -> 130
43 for = 3 -> 133
44 space = 1 -> 134
45 mobile = 6 -> 140
46 space = 1 -> 141
47 teams. = 6 -> 147
147 characters. Perfect, within 145-160.
Title: "Why Autoplaying Video Gets Cropped on Narrow Mobile Viewports in 2026"
Good search intent.
Slug: why-autoplaying-video-cropped-narrow-mobile-viewport-2026
HTML content. Need 800-1200 words. Let's aim for ~1000.
I must ensure no markdown fences, just raw JSON. The HTML inside JSON must have escaped quotes? Since it's JSON, I need to escape double quotes inside strings, or use single quotes? JSON requires double quotes for keys and string values, and any double quotes inside must be escaped as \". Also newlines can be \n or literal? In JSON, literal newlines inside strings are not allowed; must be \n. However, the user said "Output ONLY valid JSON". So I need to produce a JSON string where html is a string with escaped characters. But often in these prompts, they accept pretty-printed JSON with the html as a string containing actual newlines? Strictly, valid JSON cannot have unescaped newlines inside strings. But many LLM outputs cheat. To be safe, I should either minify the HTML into one line with \n escapes or just put it as a string with \n. Given the complexity, I'll construct the JSON carefully with escaped double quotes and \n for newlines inside the html string. Or I can avoid double quotes in HTML entirely by using single quotes for attributes? HTML attributes usually use double quotes. I can use single quotes in HTML attributes to avoid escaping issues inside JSON string? Actually inside a JSON string, single quotes are fine, double quotes must be escaped. If I write HTML with single-quoted attributes, I reduce escaping. But the HTML content itself will have many double quotes if I use them. I'll use single quotes for HTML attributes where possible, or escape all double quotes.
Let's plan the HTML content textually first, then convert.
HTML structure:
Why Narrow Viewports Crop Autoplay Video
...
The object-fit: cover trap
...
Viewport units and dynamic browser toolbars
...
Overflow: hidden hides the evidence
...
- ... ...
Why Autoplay Makes the Crop a Conversion Blocker
...
How to QA Cropped Autoplay Video with Playwright
...
- ... ...
Fixes That Preserve the Design
...
- ... ...
At NetSixtySix Mobile QA, we run these viewport audits...
Pre-Publish Checklist for Mobile Video
- ... ...
Need to ensure word count 800-1200. Let's write rich paragraphs.
Drafting content:
Opening:
Autoplaying video is usually cropped on a narrow mobile viewport because the container is told to fill the screen while the video keeps its original aspect ratio. CSS rules such as object-fit: cover force the browser to scale the video until one dimension matches the wrapper, then cut off whatever overflows. On a 375-pixel-wide phone, that overflow is almost always the left and right edges of the frame.
The result is a hero video that looks polished on a desktop monitor but decapitates speakers or slices off product details on an iPhone SE. Because the video autoplays, users see the broken frame immediately, before they can scroll or tap. This is a layout QA issue, not a video encoding problem, and it shows up in analytics as higher mobile bounce rates and lower engagement on landing pages.
That's two paragraphs, direct answer.
H2: Why Narrow Viewports Crop Autoplay Video
H3: The object-fit: cover trap
Most mobile hero sections use a wrapper set to width: 100vw and height: 60vh or height: 80vh. Inside, the tag carries object-fit: cover. The browser treats the video like a background image: it expands to cover the entire box while preserving the source aspect ratio, typically 16:9. When the viewport is narrow and tall, the math forces the width to match the screen and the height to grow beyond the visible area, or vice versa. The excess is clipped.
H3: Viewport units and dynamic browser toolbars
Mobile browsers add another variable: dynamic toolbars. On iOS Safari and Chrome Android, the address bar expands and collapses, changing the actual vh value as the user scrolls. A video that fits at page load can suddenly overflow when the toolbar retracts, causing the crop to shift mid-session. Autoplay starts before the user interacts, so the first frame they see may already be misaligned with the current viewport dimensions.
H3: Overflow: hidden hides the evidence
Developers often wrap the video in a container with overflow: hidden. That makes the cropping look intentional, but it silently removes visual information. On a narrow viewport, the viewer never knows what was cut off unless they rotate
Related resources
Keep testing your pages with these NetSixtySix resources: