Forum Discussion
Subpixel gap on left edge of <video> element
Hi all,
I'm hoping someone has seen this before. I have a custom HTML web object on a slide that contains a single <video> element sitting inside a container with rounded corners, overflow:hidden, and a dark background. The video uses object-fit:cover to fill its container edge-to-edge.
The problem: In the published HTML5 output (viewed in Chrome), there's a thin 2–4px light-coloured gap along the left edge of the video, between where the video content ends and where the container's rounded corner begins. The bottom-left corner aligns perfectly — it's only the vertical left edge that shows the gap. The gap is the same colour as the slide background, so the slide is showing through.
What I've confirmed isn't the cause:
- Web object is positioned at X:0, Y:0, 960×540 (verified in Size and Position)
- Slide dimensions are exactly 960×540
- The video file itself is clean 1920×1080, square pixels, no baked-in padding (verified with ffprobe)
- Other web objects in the same module render fine — it's specific to this screen with the video element
- The issue reproduces identically with native <video controls> and with a custom-built player (no native controls)
- It reproduces identically regardless of whether I use a wrapper div, use object-fit:cover vs contain, or apply position:absolute; inset:0 on the video
What I've tried that partially helps but doesn't fully solve it:
- transform:translateZ(0) on both the container and the video (forces GPU compositor)
- 1px negative inset on the video (top:-1px; left:-1px; width:calc(100% + 2px) etc) so overflow:hidden on the parent clips any subpixel overflow
- backface-visibility:hidden
These together reduce the gap but don't eliminate it.
My working theory is that Storyline's published player applies a CSS transform scale to the slide (and web object iframe) to fit the viewport, and the browser is rounding the video element's rendered size to a different pixel boundary than the container — standard subpixel artefact behaviour in transformed content. But the usual GPU/translateZ fixes aren't fully resolving it here.
Does anyone know:
- Whether Storyline's player applies additional CSS to <video> elements inside web object iframes that could be overriding my styles?
- Whether there's a known workaround for this specific subpixel issue in published output?
- Whether it's worth abandoning the web object approach and just using Storyline's native video insertion instead — and if so, whether custom styling (rounded corners, shadow) is still possible around a native video?
Screenshot attached. Any insight very welcome.
Thanks
MichaelOSull894 You are welcome! If my previous reply solved your issue, I’d appreciate it if you could hit the "Mark as Solution" button on that reply. This will mark the issue as solved and help others to find the answer if they run into a similar issue.
8 Replies
Does switching the “Scale with slide” option on or off in the web object display settings make any difference?
I’ve used videos embedded in web objects quite a bit, but typically in full-screen layouts, and I haven’t encountered this issue before in those cases. Are you embedding videos from external sources such as Vimeo or similar platforms that include their own player CSS or styling? Does this issue occur only in Chrome, or is it consistent across different browsers?
If you’d like, you can share the HTML file you’re using in your web object, and I’d be happy to test it and help troubleshoot further.
The scale with slide was checked but I have tried both ways and it doesn't change anything. I have attached the HTML file - If you don't mind taking a look I would be grateful
I don’t see the attached HTML file. Could you please zip it and resend it?
Sorry
Just to confirm, do you want to remove the thin line along the left edge of the video? (It’s not visible in the screenshot below.)
The borders (unwanted edges) are part of the video itself. It’s just the way it has been recorded. Below is a screenshot of the video opened in a video player.
It has nothing to do with Storyline, as the same borders are visible when the HTML is loaded in a browser standalone. To get rid of it, slightly adjust the following CSS:
.player video{ left:-5px; width:calc(100% + 5px); }left: -5px;
Shifts the video 5 pixels to the left. This effectively pushes the left edge (including that unwanted border line) out of view.width: calc(100% + 5px);
Makes the video slightly wider than its container by 5 pixels. This compensates for the shift so you don’t end up with a gap on the right side.It sounds so obvious when you explain. Thanks it's really appreciated
MichaelOSull894 You are welcome! If my previous reply solved your issue, I’d appreciate it if you could hit the "Mark as Solution" button on that reply. This will mark the issue as solved and help others to find the answer if they run into a similar issue.