Video player shows black border

Question

I use a HTML5 video player and it works, but it shows a 1/2 pixel border on the right side. I already checked if it was because the video itself and I tried to set

border:solid 0px black;

but that didn't help.

My current code:

<video id="video" autoplay>
  <source src="intro.mp4" type="video/mp4" id="video">
  Your browser does not support the HTML5 player.
</video>

and the style

#video{
    width:80%; right: 0; top: 0;
    display:none;
    border:solid 0px black;
}

results in

If someone could help me out, I would be really happy :D

Thanks

Sandy

why not if you share your code – Assembled

#10203937 – Supporter

@Supporter I tried that, but it leaves a long border trough my text underneath it. And border:none results the same – Sandy

Is it the same on all browsers? – Supporter

@Supporter No in IE11 it shows a green screen ( which is due my video card? ) but when I use the effect to resize it it shows black borders on both sides. Chrome ( the picture ) shows just one border on the right. – Sandy

Answer 1

I found the following to be the best solution for removing the 1px border:

video {
    clip-path: inset(1px 1px);
}

Chino

Hi, I have the same issue and this solution works in Chromium browsers but not in Firefox. – Rhynd

This worked for me on both Chrome and FF. Thanks! – Denbrook

No probs @SamAssoum – Chino

Thank you @timbari!! Works like a charm. Tested in Chrome, Opera, Firefox and Edge. – Anguilliform

Glad it helped @RichardKühleis - thank you for testing across browsers :) – Chino

Worked for me as well for Chrome on Windows and Safari. Is this a browser bug? If so, any references to the actual bug? – Sacrifice

Answer 2

NONE of this is right. This is a focus thing. You need to do:

video:focus { outline:none; }

// or choose a color or transparent or something other if you are needing the focus for ADA/WCAG compliance.

Polygamist

Check your selector and make sure they match. This is explained elsewhere on here. This is the correct method. #57609193 – Polygamist

This should be selected as an answer! Works perfectly, looks like chrome ads some outline to the video element on :focus. – Thebault

Answer 3

it actually a quite known issue. a fix of hide it a bit solves it -> Give the parent element, who wraps the video overflow: hidden and the video (position relative/absolute) left:1px.

Like this:

Html:

<div class="video-wrapper"
  <video id="video" autoplay>
    <source src="intro.mp4" type="video/mp4" id="video">
    Your browser does not support the HTML5 player.
  </video>
</div

Css:

.video-wrapper{
    overflow: hidden
}

.video-wrapper #video{
    position: relative; /* could be absolute if needed */
    left: 1px;
}

Presbyopia

that works, thanks. You also forget to close a tag : class="video-wrapper" -> > <---- – Forman

Answer 4

From this (black video borders):

To This (no black borders):

By adding:

<video width="103%" style="margin-left: -3px">

Devaughn

Answer 5

To improve timbari's solution - if using border radius, borders go out of shape. To fix that, lower the inset values

In react it would look like this:

clipPath: 'inset(0.01px 0.01px)'

Kenneth

Answer 6

How about:

border: none !important;

If this doesn't work try adding as well:

border-right: none !important;

If these don't help please show us your site

Dioecious

It could also be a box shadow too... so try adding: box-shadow: none !important; – Dioecious

Answer 7

The solution is to add the following CSS. This solved the issue for me..

video {
   clip-path: fill-box; 
}

Multitudinous

Answer 8

I've had this issue as well and I can't figure out why it's happening. What I did to get around it was something like this:

<div class="container">
  <video>
    <source>
  </video>
</div>

.container {
    overflow: hidden;
}
.container video {
    display: block;
    width: 100%;
    transform: scale(1.01)
}

I don't know if this is the best way of solving it, but it works.

Seersucker

Answer 9

It have worked on my side to avoid black and white borders.

margin: -1px;
clip-path: inset(0px);

Hewet

Answer 10

I encountered an issue with a black outline appearing around a video, even after attempting various solutions. Initially, using clip-path: inset(10px 10px); seemed to solve the problem, but the outline reappeared after a few months. Solution is written in Angular!!!

<section id="video-wrapper">
  <video
    #maltaIntroVideo
    id="video"
    (ended)="onVideoEnded()"
    muted
    playsinline
    (loadedmetadata)="onMetadataLoaded()"
    autoplay>
    <source
      src="/assets/VisitMalta_Logo_Animated.mp4"
      type="video/mp4" />
  </video>
  <div id="video-overlay" #videoOverlay></div>
</section>

#video-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

#video {
  width: 80%;
  height: auto;
  position: relative;
  z-index: 1; 
  border: none;
  clip-path: inset(10px 10px);
}

#video-overlay {
  position: absolute;
  border: 15px solid white;
  z-index: 2; 
}

I get references to the video and video overlay elements, and I set up an event listener for screen size changes to re-adjust the overlay size. This ensures the overlay always matches the video’s dimensions, hiding the black outline. The loadedmetadata event also triggers adjustOverlaySize to ensure proper initialization.

import {
  AfterViewInit,
  Component,
  ElementRef,
  EventEmitter,
  Output,
  ViewChild
} from '@angular/core';

@Component({
  selector: 'app-video-visitmalta',
  standalone: true,
  templateUrl: './video-visitmalta.component.html',
  styleUrls: ['./video-visitmalta.component.css']
})
export class VideoVisitmaltaComponent implements AfterViewInit {
  @Output("videoEnded") videoEnded = new EventEmitter<void>();

  @ViewChild('videoOverlay', { static: false }) videoOverlay: ElementRef<HTMLDivElement> | undefined;
  @ViewChild('maltaIntroVideo', { static: false }) maltaIntroVideo:
    | ElementRef<HTMLVideoElement>
    | undefined;

  onVideoEnded() {
    this.videoEnded.emit();
  }

  ngAfterViewInit(): void {
    if (this.maltaIntroVideo) {
      this.maltaIntroVideo.nativeElement.muted = true;
      this.maltaIntroVideo.nativeElement.play();
    }

    window.addEventListener('resize', this.adjustOverlaySize.bind(this));
  }

  onMetadataLoaded() {
    this.adjustOverlaySize();
  }

  private adjustOverlaySize() {
    if (this.maltaIntroVideo && this.videoOverlay) {
      const videoElement = this.maltaIntroVideo.nativeElement;
      const overlayElement = this.videoOverlay.nativeElement;
      const videoRect = videoElement.getBoundingClientRect();

      overlayElement.style.width = `${videoRect.width}px`;
      overlayElement.style.height = `${videoRect.height}px`;
      overlayElement.style.top = `${videoRect.top}px`;
      overlayElement.style.left = `${videoRect.left}px`;
    }
  }
}

So i get the reference to the video and the video-overlay and i set an event lisner for when the screen size changes to trigger the adjustOverlaySize again wich gets the current height width and positioning of the video and i set the overlay with those values. Also i have (loadedmetadata)="onMetadataLoaded()" when the video initizalize fully in the begining to trigger the adjustOverlaySize. And the last step was to create enouch bigger white border wich hides the video black outlines. enter image description here

Fritzsche

Answer 11

I'm using react and next js. None of the solutions worked for me.

I tried scaling the Media controller (or what's surround your video) and making the next parent hide the overflow.

Parent of the video: scale: 1.05; Grandparent of the video: overflow: hidden;

Otto