CODEWITHSUNDEEP
google-chromesafarihtml5-video
Thom Harris
Thom Harris

Reputation: 87

how to stop a black line appearing beneath my html5 video in safari and google chrome

link to the page I'm trying to get sorted

I've got some html5 video on this page and I've managed to get it sorted so that I'm happy with it working in most browsers and displaying an image in those that don't support the video tag.

There is a strange bug that I don't seem to be able to sort out in chrome and safari where a thin black line appears below the video. I've been looking into it but have come up with nothing.

Upvotes: 7

Views: 11958

Answers (5)

Jeetu Bishwakarma
Jeetu Bishwakarma

Reputation: 11

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

Upvotes: 1

Alfie
Alfie

Reputation: 2350

You are missing the closing tag for the anchor link surrounding your video, and the video tag itself:

<a href="http://finefurnituremaker.com/images/gracie/blonde_gracie/David-Savage-Furniture-Gracie-Blonde-LBM.jpg" rel="lightbox[gracie]"><video width="880px" height="495px" autoplay="autoplay" loop="loop" id="video1" onended="this.play()">
<source src="../video/blonde-gracie/BlondeGracieAnimation.mp4" type="video/mp4">
<source src="../video/blonde-gracie/BlondeGracieAnimation.webm" type="video/webm">
<source src="../video/blonde-gracie/BlondeGracieAnimation.ogg" type="video/ogg">

Add </video></a> at the end:

<a href="http://finefurnituremaker.com/images/gracie/blonde_gracie/David-Savage-Furniture-Gracie-Blonde-LBM.jpg" rel="lightbox[gracie]"><video width="880px" height="495px" autoplay="autoplay" loop="loop" id="video1" onended="this.play()">
  <source src="../video/blonde-gracie/BlondeGracieAnimation.mp4" type="video/mp4">
  <source src="../video/blonde-gracie/BlondeGracieAnimation.webm" type="video/webm">
  <source src="../video/blonde-gracie/BlondeGracieAnimation.ogg" type="video/ogg">
</video></a>

Edit:

Also try giving the video tag a border:0 css style:

<a href="http://finefurnituremaker.com/images/gracie/blonde_gracie/David-Savage-Furniture-Gracie-Blonde-LBM.jpg" rel="lightbox[gracie]"><video style="border:0;" width="880px" height="495px" autoplay="autoplay" loop="loop" id="video1" onended="this.play()">
  <source src="../video/blonde-gracie/BlondeGracieAnimation.mp4" type="video/mp4">
  <source src="../video/blonde-gracie/BlondeGracieAnimation.webm" type="video/webm">
  <source src="../video/blonde-gracie/BlondeGracieAnimation.ogg" type="video/ogg">
</video></a>

Upvotes: 1

Akshay Dalvi
Akshay Dalvi

Reputation: 41

You can use CSS hack

outline: 4px solid white;
outline-offset: -4px;

Upvotes: 4

misterben
misterben

Reputation: 7821

In the video originally linked in the question, the black line is in the MP4 video itself. It's not in the webm and ogg versions. Safari and Chrome will play the MP4.

You could put the video inside a smaller div with overflow:hidden to crop it, but you probably want to fix the video file.

div#videocrop {
    height: 493px;
    overflow: hidden
}

Upvotes: 12

markof
markof

Reputation: 1

Solved it!!! i changed my PAR (Pixel Aspect Ratio) to "Square Pixels", in that way, i avoided those black lines ;)

Upvotes: 0

Related Questions