Forum Discussion

MichaelOSull894's avatar
MichaelOSull894
Community Member
8 days ago
Solved

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, ...
Articulate 360
  • Nedim's avatar
    Nedim
    8 days ago

    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. 

Nedim's avatar
Nedim
Community Member
8 days ago

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.