How do I remove the green line at the bottom of my video specifically on Chrome?

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>

Answer №1

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

If the above code does not yield the desired results, feel free to share a codepen link for further review of your complete CSS styling for that specific section.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What distinguishable characteristics can I look for to differentiate between code written in React and code written in React Native?

I stumbled upon a project on GitHub that gives the impression of being a mobile application when executed. However, upon reviewing the code, it appears to have been developed using React rather than React Native. Is there a definitive method to verify thi ...

How can I detect a click event on an SVG element using JavaScript or jQuery?

Currently, I am developing a web application that utilizes SVG. However, I have encountered an issue: I am struggling to add a click event to each element within the SVG using jQuery. The problem arises when attempting to trigger the event; it seems like t ...

XSLT selecting the remaining elements in a tokenized array

In my XSL document, I have a requirement to generate a hyperlink with text that includes a line break, resulting in two separate sentences. To achieve this, I am utilizing the tokenize function to split words based on whitespace character. <xsl:variab ...

Angular's NGX Spinner is efficiently blocking the entire page

I'm currently incorporating ngx-spinner into my Angular application, but I'm running into an issue where it's loading on the entire page instead of just a specific area. Below is the code that I'm using: <p> Hello name </p> ...

The information displayed in Next.js appears in the form of an array, which is distinct from the JSON object provided by the API

I am retrieving data from a Laravel API using getServerSideProps(): This is the method I use to fetch the data: function Product({ data }) { console.log(data); return ( <div>Hello</div> ) } export async function getServerSidePr ...

Navigate to a different page after completing form submission

I am facing an issue with navigating between pages on my website. I have a form that processes data upon submission, and after processing, I want to redirect the user back to the previous page. Currently, my webpage consists of a list of links that lead to ...

Unseen components and columns with Bootstrap 4

I am attempting to hide a checkbox input in the middle of some column elements using Bootstrap 4. <div class="container"> <div class="row"> <a class="col-2"> 1 of 2 </a> <input type="checkbox" class="invisibl ...

Adjust the Navbar to be Aligned Completely to the Left and Divide it into 12

I need my navbar to be split into 12 sections so that each item occupies one section, starting from the far left of the screen. The current alignment doesn't meet this requirement as shown in the image below; https://i.sstatic.net/irYqV.png Despite ...

Visual Studio has issues with div elements nested within dl elements

There appears to be an issue with Visual Studio 2019 (not tested previous versions) not supporting div tags within dl. When copying and pasting code from the source (3rd example) into an HTML page in Visual Studio, warnings are generated. In the followin ...

Issue with rgba background color not working in Bootstrap 3 navbar

Attempting to change the background color of bootstrap's navigation bar to a lower opacity rgba one, but facing difficulties. There are no changes being reflected at all. Below is the custom navbar CSS: .navbar-custom { background-color: rgba(255 ...

Saving a collection of React.js components in JavaScript to a specific location or storage for future use

Important Note: I am unable to utilize the Node FS module as my knowledge about npm and fs is limited. In my current project, I am developing a simple game where users can interact by clicking a button to display an image of a 'duck' on screen. ...

Next.js may provide a useContext state that is undefined

Incorporating dark mode functionality into a header component to switch themes. See the code snippet below: ThemeContext.tsx code: "use client" import { createContext, useState, ReactNode, useEffect } from "react"; type Theme = { ...

When converting a block formatting context into a block, the margin does not collapse

It seems that the behavior of margins collapsing between block elements inside and outside a BFC is not as straightforward as expected. For instance, when a button element's display property is set to inline-block, it forms a BFC, which should prevent ...

The console displays "undefined" when attempting to print a specific column from a database table

I am currently attempting to display a specific field on my React app by using console log. My goal is to log certain columns from a table that has the following structure: https://i.sstatic.net/dkc1F.png The column I am trying to console log is the listi ...

The navigation in Ionic is having trouble loading a specific page

As a newcomer to the world of Ionic, I am embarking on creating an ion-nav-view following the guidance provided in the tutorial here. After carefully constructing 2 pages and configuring an Angular conf file, I encountered an error message while loading th ...

Use Jquery to modify the value of a data attribute when a key is released

When I am adding some HTML to a document, one part includes a text input field. My goal is to update the value of the closest li element's data attribute whenever information is typed into this input field. Unfortunately, this functionality is not cu ...

The CSS property col visibility:collapse is ineffective on the Chrome browser

I am attempting to conceal some columns in my HTML code by using MDN colgroup and col elements, and manipulating the styles of the columns. The <td> containing the text 'visible' is visible in all browsers (which is good), but the one with ...

The best method for quickly loading a webpage that is over 20MB in size

My website is a single-page calendar featuring a full year's worth of images. With 344 requests and a total load size of 20MB, the page consists of a simple PHP script without a database. The requests include a CSS file (15KB), 4 JS files (20KB), two ...

Designing div arrangements

I am trying to create a layout of divs similar to the one shown in the image: https://i.sstatic.net/DLUe8.png The challenge I am facing is that I need to arrange them in a row, with one large div in the center and four smaller divs on the sides. I am plann ...

How wide should a <NavDropdown> be in react-bootstrap 5?

Another day, another challenge. CSS is not my forte, oh dear. I'm attempting to adjust the width of a dropdown in react-bootstrap. Here's what I tried: <NavDropdown style={{width: "5vw"}} title="User" id="navbarScroll ...