Below is a screenshot showing a green line at the bottom of my video. The issue occurs specifically in Chrome, where the green line is visible whether the video is maximized or in its normal state. The only time it disappears is when the play controls overlap with it or if I view the video on Mozilla browser which shows no issues. Any suggestions on how to address this problem in Chrome?
Note: I am currently using only Bootstrap for styling, without any additional CSS.
https://i.sstatic.net/UnqIs.png
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>