Why does the video cover extend past its lower boundary in HTML?

I'm facing an issue where a purple cover over the <video> element extends slightly beyond the video's bottom border. Here's the code I'm using:

.media-cover {
  display: inline-block;
  position: relative;
}

.media-cover:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #6b478fb3;
  opacity: 0;
}

.media-cover:hover:after {
  opacity: 1;
}

video {
  border: 2px solid red;
  height: 150px;
}
<div class="media-cover">
  <video class="cmedia-box" controls>
  <source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
</div>

Looking for assistance to resolve this.

htmlcsshtml5-video

Answer №1

Every small part of a document can be considered a form of communication. Just like typing out individual letters, the browser also interprets spaces between them.

When it comes to inline elements, such as videos with default display values set to "inline", the browser includes spaces around them in the rendering process:

<div class="media-cover">
   <video class="cmedia-box" controls>...</video>
</div>

This will result in a space being rendered after the video element, just before the closing </div> tag. To prevent this extra space from appearing, there are several approaches you can take:

a) Avoid adding unnecessary spaces:

<div class="media-cover">
   <video class="cmedia-box" controls>...</video
></div>

In this case, make sure there is no space between the closing </video> and the opening </div> tags.

b) Change the display value to block level (by using display:block) to solve the issue.

c) Consider floating the inline element by applying float:left, which can also resolve the problem.

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

Show the total sum of a specific column in a datatable and enable the option to export the data to an Excel

When exporting a datatable as an Excel file with 4 columns, the third column contains product prices. After the export, I would like to see an additional row at the end of the table labeled "Total" that displays the sum of all values in column 3. I initia ...

javascriptjqueryhtmldatatables

What is the best way to use CSS to center two blocks with space in between them?

My goal is to achieve a specific design: I want two text blocks with some space in between them aligned around the midline of the page (refer to the image). I have experimented with the float property, as well as used margin and padding to create the gap ...

htmlcssalignment

Tips for sending a string as HTML content in VueIn Vue, you can send a string as

I am attempting to pass the value for exp by using this code snippet. However, the form of selectedChannel.explanation appears as "channel name". Is there a way for me to display exp as channel name? computed: { channel: { get() { ...

htmlvue.js

Is there a way to ensure the .header and .nav remain fixed at the top of the viewport?

I'm currently working on keeping the .header and .nav elements fixed in the viewport so they don't disappear from view. What's intriguing is that I'm utilizing FlexBox, but I haven't come across a FlexBox feature that allows me to ...

htmlcss

The current version of HTML5 Context Menus is now available

I'm in need of implementing the HTML5 Context Menu feature. Currently, only Firefox supports it. My main objective is to add some menu options without replacing the existing context menu. How can I achieve the same functionality now? I am aware of va ...

javascripthtmlcontextmenu

What is the most efficient method for embedding a YouTube video into a <video> tag using React?

I tried embedding a YouTube video using an HTML5 tag, but encountered an error <div className={classes.VideoContainer}> <video className={classes.movieInfo__trailer} src="https://www.youtube.com/watch?v=V3hy2aLQFrI" ...

htmlreactjs

I envision my home page being divided into two visually stunning full-screen sections, each taking up the entire height of the page

I am currently working with the code shown below. It successfully displays the first part in full height, regardless of resolution, but once I scroll to the second half, there is a large empty gap. How can I eliminate this gap and make the transition smoot ...

htmlcssviewport-units

Hidden input field when inactive

Whenever I start typing in my input form, the text disappears after a moment. The only way to prevent this is by continuously pressing on a letter key on my keyboard. This issue began after I added a resizeInput attribute that adjusts the size of the inpu ...

jqueryhtmlcss

Using a diverse class for enhancing the PrimeVue dialog's maximizable feature

I'm currently working with the PrimeVue Dialog component. My goal now is to apply different styles depending on whether the dialog is maximized or not. Let's keep it simple by saying I want to change the text to bold or red when the dialog is max ...

javascriptcssvue.jsdialogprimevue

Having trouble loading CSS and JavaScript files in CodeIgniter?

In my project, I am utilizing Bootstrap as a template. However, when attempting to access Bootstrap in Codeigniter, the page fails to load the CSS and JavaScript files. I have included the URL in autoload.php $autoload['helper'] = array('url ...

javascriptphphtmlcsscodeigniter

Yet another inquiry about the inexplicable failure of my jQuery Ajax in Internet Explorer

Just need to double-check if my test code below is correct. I've done some research and it appears that html syntax errors can cause the jquery ajax to not work in Internet Explorer? There are several includes where this code is located, so could the ...

jqueryhtmlajax

Unable to identify the Xpath selector for the "Account settings button" and "find my iPhone" features within iCloud

When trying to access my iCloud account settings and locate the "Find my iPhone" button on iCloud.com, I am encountering issues with my selectors. It seems like there are no frames on the page, but the Xpaths I'm using are not matching. Here are the ...

javacssseleniumxpathautomation

In React, I'm unable to navigate to a different page

My English may not be the best, but I am working on creating a Login Page. The issue I'm facing is that when I click the Login button, I want to navigate to the Home Page I designed using React. However, whenever I try to implement Link or Route comma ...

javascripthtmlcssreactjsbootstrap-5

I encountered an error message that said: "Cannot assign '12': 'Cart.product' must be a 'Product' instance. Can someone please assist me in resolving this problem?"

[Included in the image of my code is the add-to-cart function where the error can be found on line 5] def add_to_cart(request): user = request.user product_id = request.GET.get('prod_id') product = Product.objects.get(id=product_id) ...

htmldjango

What is the best way to arrange these divs one on top of another?

I have combed through numerous resources but still haven't found a solution to my problem. I am struggling with figuring out how to stack the "top_section" div on top of the "middle_section" div. Currently, "middle_section" is appearing above "top_sec ...

htmlcss

Can you explain the function of .modal('dispose') in Bootstrap 4?

As stated in the documentation, the .modal('dispose') method is used to destroy a modal. .modal('dispose') This method destroys the specified modal element. However, after creating an eventListener like this: $('#myModal') ...

jqueryhtmltwitter-bootstrapbootstrap-4

Where to position a button in the middle of a div that varies in size

I'm currently working with this code snippet: <div class="outer"> <ul class="list"> <li class="inner"> <div class="line">information1</div> <div class="line">hyperlink1</div&g ...

csshtmlbuttonalignment

What is the best way to retrieve an element from an array within a script?

As a newbie in the realm of vue and Laravel Framework, I am eager to fetch data from an API and display it dynamically on my web page. To achieve this, I have already set up a table named 'Progress' where I seeded some initial data. Utilizing AP ...

javascriptphphtmllaravelvue.js

Discovering the screen width and increasing its value using CSS

Is there a way to determine the screen size and then add 253px to it? For example, in CSS: .element { width: calc(100% + 253px); } What would be the best approach to achieve this? ...

htmlcss

Tips for perfectly centering a light box and concealing a scrollbar

Hello, I'm a web designer and facing an issue with the alignment of my lightbox. The lightbox is not center aligned on any resolution, which is causing some trouble. I have also added a black overlay for transparency in the background, but it's s ...

jqueryhtmlcss