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

Accepted answer
Score: 12

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

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

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

You are missing the closing tag for the 3 anchor link surrounding your video, and 2 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 1 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>

Score: 0

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

More Related questions