2

I have supplied a screenshot of the green line occurring on the bottom of my video. In the Chrome browser the green line is visible both when it's maximized in the and when it's in it's normal state, the only time the green line isn't visible is when the play controls are over top of it or if I run my localhost in Mozilla, Mozilla has 0 issues. How to solve this in Chrome?

Edit: Forgot to mention I am using only bootstrap for the styling right now no CSS.

Green border on bottom of video

    return (
        <React.Fragment>
            <Navbar />
            <div className="container">
                <div className="row">
                    <div className="col-12">
                        <div class="embed-responsive embed-responsive-16by9">
                            <video class="embed-responsive-item" src={video.video_path} controls</video>
                        </div>
                        <div>{video.title}</div>
                    </div>
                </div>
            </div>
            <footer>
                <Footer />
            </footer>
        </React.Fragment>
Jem
  • 45
  • 1
  • 6
  • Try disabling hardware acceleration. That seems to be a common recommendation. – B. Fleming Dec 25 '19 at 01:57
  • @Fleming Thanks for your comment that actually fixes the issue for me. Now I wonder when I put this into production this could be an issue for others. – Jem Dec 25 '19 at 02:08
  • 1
    It absolutely can be a problem for others, but it's one of those problems that you shouldn't be too concerned with. The problem would be either your browser version, hardware setup, device driver version(s), or a problem with the exported video, none of which you can fix with code. Of all of those, only the exported video could potentially be fixed if you have access to the raw file(s), in which case trying a different encoding or disabling hardware acceleration in your editing software and re-exporting would be your best bet. – B. Fleming Dec 25 '19 at 02:15
  • Makes sense, thanks for your input. – Jem Dec 25 '19 at 02:24

1 Answers1

1
video{ 
     display:block;
     vertical-align: bottom;
     background:transparent;
    }

If this does'nt work, please provide codepen so I can take a look into your complete CSS for the section.

Shakti
  • 723
  • 8
  • 15