Using the <video> element is creating a gap between itself and the element following it

I am facing an issue with a video background on my webpage. The video is perfectly positioned, but it is creating a large gap between itself and the next element. Despite checking for margins or paddings in the inspection tool, I cannot seem to find the source of this gap. How can I get rid of it?

<video loop muted autoplay class="bg-video">
  <source src="/assets/images/test.MP4" type="video/webm">
</video>
<h2 class="text-center">NEWS</h2>

The HTML above shows that there are only two elements: the video and the following h2 element.

CSS: 

.bg-video {
 position: relative;
 z-index: -100;
 overflow: hidden;     
 left: 50%;
 transform: translate(-50%, -50%);
}

Here is a screenshot illustrating the space issue (screenshot has been resized)

htmlcssangular

Answer №1

If you want to avoid affecting other elements, consider changing the position from relative to fixed. This will remove it from the normal flow of elements. In a similar situation, I used this CSS code:

#backgroundVideo { 
    position: fixed;
    min-width: 100%;
    min-height: 100%;
    z-index: -100;
}

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

When the video finishes playing, it will automatically switch to a still image with clickable links

I'm completely new to HTML5 and I'm looking for the simplest way to play a pre-made video from Adobe After Effects in HTML5, and then replace the last frame with a still image that contains clickable icons. 1) I've explored numerous example ...

javascriptjqueryhtmlhtml5-canvashtml5-video

Include image hover text without using HTML

I am looking to add a hover effect to some images using CSS and JS since I cannot directly edit the HTML file. The goal is to have centered text pop out when hovering over certain images. I know the div class of the image but unfortunately, I cannot add te ...

javascripthtmlcsshover

What is the process for displaying a three.js project?

I've been trying to follow a beginner's tutorial on three.js from this link, but I'm encountering an issue in part 2 where nothing seems to render on my webpage. Despite checking out other guides, I can't seem to solve the problem. I u ...

javascripthtmlcssthree.jsrendering

Tips for avoiding word fragmentation in <pre> code blocks

pre { white-space: pre-wrap; /* CSS 3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ overflo ...

htmlcss

Trouble with achieving equal height columns in nested flexbox layout on Google Chrome

I am looking to evenly space several sidebar blocks throughout a lengthy post. To achieve this, I have utilized Flexbox within the sidebar for handling the even distribution of the blocks and it has been working flawlessly. Check out Code Pen: http://cod ...

htmlcsssassflexbox

Enable and disable modal popup functionality in ng-bootstrap for Angular 5

How do I enable (editable) and disable (not editable) an ng-bootstrap modal popup? I have the following HTML code to display a modal popup when a button is clicked. However, I want it to be inactive until a certain condition is met. I am unsure of how to ...

angularhtmlng-bootstrap

The combination of using p:inputText within p:layoutUnit does not function properly when placed inside p

Recently, I encountered a problem with a modal dialog that contains some input components. The issue arose when I implemented a p:layout within the dialog. Initially, the p:inputText component within a p:layoutUnit functioned properly and gained focus. Ho ...

cssprimefaces

What are the steps to integrate npm into a Cordova app within Visual Studio?

I am currently working on developing a hybrid app using the "Tools for Apache Cordova" project template in Visual Studio. To incorporate angular2 into my project, I have added all the necessary modules to packages.json. After compiling everything and reso ...

cordovaangularnpmvisual-studio-cordova

What is the best way to format a `<ul>` element that does not contain any `<li>` elements?

A new feature on my website allows users to dynamically add list items (<li>) to a list container (<ul>). I want the list container style to change when there are no list items present. <ul class="con"> </ul> ul.con:not(: ...

csscss-selectors

I am unable to transmit information using the `http.post` function

When attempting to send a post request to the backend, I am receiving a response code of 500 and an empty data object on the API side. Interestingly, using Postman gives successful results. return http.post(link,data,headers).subscribe(response=>{ ...

angulartypescripthttp-post

What is the best way to convert the value of "range" to floating point numbers in JavaScript?

Why is it that when I input a float number, like "3.4567890", as the value in an input field, it automatically gets converted to type 'int'? This conversion is not desired, as I want the value to remain as a 'number' or 'float&apos ...

javascripthtmlrange

Align a button to the left or right based on its position within the layout

On the left side, there is dynamic text and on the right side, a button is displayed as shown below: <div class="dynamic-text"> {{ dynamicText }} </div> <div class="some-button"> < ...

htmlcssvue.js

Refreshing HTML Form upon Submit using JavaScript

I've been searching through various discussions without any luck, but I'm encountering an issue with a form that successfully submits data to a Google Sheet, yet the input fields retain their content after submission. Here is the code: <form ...

javascripthtmljsonforms

Having trouble uploading an image to firebase storage as I continuously encounter the error message: Unable to access property 'name' of undefined

Hey there, I'm currently facing an issue while trying to upload an image to Firebase storage. Despite following all the instructions on the official Firebase site, I'm stuck trying to resolve this error: Uncaught TypeError: Cannot read property ...

javascripthtmlimagefirebase-storage

In the latest version of Angular, accessing document.getelementbyid consistently returns null

I am struggling with a component that looks like this export class NotificationPostComponent extends PostComponent implements OnInit, AfterViewInit { commentsDto: IComment[] = []; commentId = ''; ngOnInit(): void { this.route.data ...

angulartypescript

What strategies can be used to avoid a single dangling word at the end of a line within an HTML element?

I am in the process of developing a straightforward webpage with marketing content. One aspect I find unfavorable is when a line of text stretches too long and breaks onto the next line, which is acceptable; however, it often splits in a manner where there ...

htmlcssformatting

How to center an item in a Bootstrap navbar without affecting the alignment of other right-aligned items

Currently, I am in the process of designing a website and have implemented a Bootstrap navbar. The navbar consists of three icons aligned to the right, and I am looking to center another element. However, when I use mx-auto, the element does not center per ...

htmlcssbootstrap-5

What is the best approach to ensure mobile responsiveness and properly space the TV show div?

How can I center the searched images of shows and add spacing below each image? The 12-column grid is not behaving properly and the images are aligned correctly on desktop but not on mobile. Any suggestions on how to fix this using CSS and Bootstrap? The g ...

javascriptcssbootstrap-4responsive-designresponsive

Setting up an Angular development environment without relying on the CLI framework

I've been diving into learning Angular and experimenting with demo apps, but I'm finding it difficult to get a clear understanding of how everything works and the underlying concepts. Most resources I come across emphasize using CLI for automatio ...

angular

What is the best way to locate values within observable data fields?

let filteredRows$: Observable<any[]> = combineLatest([ this.items$, this.term$, ]).pipe( map(([items, term]) => items.filter( (item) => term === "" || item.product_name === term || ...

angularobservable