What is preventing my video from filling the entire screen?


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yoga </title>
    <style>
        .video {
            filter:brightness(40%);
            width: 100%;
            height: 750px;
            object-fit: fill;
            z-index: -1;
        }
        @media (max-width:768px){
            .video {
            filter:brightness(40%);
            width: 100%;
            height: 650px;
            object-fit: fill;
            z-index: -1;
        }
        }
    </style>
</head>

<body>

    <section  class="head">
        <video autoplay="true" loop="true" muted class="video">
            <source src="images/istockphoto-1305960252-640_adpp_is.mp4" type="video/mp4">
            </source>
        </video>
    </section>

</body>

</html>

why there is a gap between video and end of screen

there is a litter space between the video and actual edge of the window, I want the video to stretch the full width with no white space, can someone assist me with this?

Answer №1

The reason for this issue is due to the default margin of 8px on the body element. To fix it, simply add margin: 0; to the body CSS and the problem will be resolved.

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

Seamless flow from one image to the next

I'm working on a project with a slideshow, but I've noticed that when it transitions between images, it can be quite abrupt. I'd like to find a way for it to change smoothly from one image to the next. <div> <img class="mySli ...

Modify JSON from using single quotes to double quotes using JavaScript

Received a JSON from the backend to the front end that uses single quotes throughout, causing issues with a Magento 2 widget. The JSON structure is as follows: { 'mood': 'happy', 'reason': 'why shouldn't I?'} T ...

JavaScript variable not refreshing its value after submitting an HTML form

In my HTML form, I have 8 textboxes enclosed in div tags with IDs ranging from fa1 to fa8. By default, two of the textboxes are visible while the remaining six are hidden. To toggle the visibility of these divs, I've implemented two buttons - addfa an ...

Does Transclude eliminate tr and td elements from the content?

I'm encountering an issue with my angularjs application where the tr and td tags are mysteriously disappearing. angular.module('transcludeExample', []) .directive('pane', function() { return { restrict: 'E' ...

Creating inner borders on a pie chart with HTML and CSS: A step-by-step guide

After putting my coding skills to the test, I successfully crafted a stunning pie chart using only HTML and CSS. https://i.sstatic.net/5xCbl.png Here's the code snippet I tinkered with: HTML - <div class="pie-chart"></div> CS ...

Encountering an issue with Nuxt 3.5.1 during the build process: "ERROR Cannot read properties of undefined (reading 'sys') (x4)"

I am currently working on an application built with Nuxt version 3.5.1. Here is a snippet of the script code: <script lang="ts" setup> import { IProduct } from './types'; const p = defineProps<IProduct>(); < ...

Fade effect not working with Bootstrap Modal

I am encountering an issue with the Twitter Bootstrap modal while trying to display post details on WordPress. The problem is that when the modal opens, the entire screen turns grey and nothing in the modal is clickable. I can only exit this mode by pressi ...

The SSE functionality is effective in a local environment, but encounters issues when deployed on Vercel's

Operating a proxy server, I send a request to OpenAI which responds with a Readable Stream object. The proxy server then redirects these events back to the client. While my code functions properly on a local deployment, it encounters issues when deployed ...

I'm having an issue where whenever I click on a different page, I keep getting redirected back to the first page

Upon conducting research, I discovered that by implementing the refined code below, I was able to resolve my issue (my other html was also corrected using this solution) setTimeout(function() { datatable_FTP.ajax.reload(null, false); }, 30000); Although I ...

Creating effective href anchors within an iframe using the `srcdoc` attribute

While loading some HTML content in an iframe using the srcdoc attribute, I encountered an issue where following anchor tag links inside the iframe caused the entire page to load within the iframe instead of scrolling to the linked id. You can see a demons ...

Troubleshooting issues with mail subscriptions using Ajax and PHP

My Idea for Implementation I successfully set up a subscription form using PHP initially. However, I wanted to enhance the user experience by implementing an Ajax feature that would display a nice image and a "thank you" message without reloading the pag ...

Utilizing jQuery's POST Method to Fetch JSON Data on a Website

I've developed a Java REST API and now I want to retrieve JSON data on my website (which is built using HTML & CSS) by utilizing jQuery. The method to be used is POST, and here is the structure of my JSON: { "sessionID" : "25574", "interactiv ...

Import necessary styles into the shadow DOM

Embracing the concept of shadow dom styles encapsulation is exciting, but I wish to incorporate base styles into each shadow dom as well (reset, typography, etc). <head> <link rel="stylesheet" href="core.css"> ... </h ...

Displaying inline causes the block elements to be removed from the

After two months of learning HTML and CSS, I still feel like a beginner. I'm attempting to create a header navigation bar, but whenever I apply the display: inline property, everything vanishes. I know this issue is probably basic, but any advice woul ...

Fixed navbar at the bottom of the page that transitions to static when scrolling reaches a certain location

Is it feasible to achieve this using Bootstrap v3? After conducting extensive research, it appears that a custom solution may be necessary. In essence, I am working with a navbar positioned at the bottom of the content area. Upon page load, if the navbar& ...

Navigating through pages: How can I retrieve the current page value for implementing next and previous functions in Angular 7?

Greetings, I am a new learner of Angular and currently working on custom pagination. However, I am facing difficulty in finding the current page for implementing the next and previous functions. Can anyone guide me on how to obtain the current page value? ...

The onmessage event in the websocket client seems to be malfunctioning and is not triggering

In my implementation using node.js, I have set up a websocket server and client. The handshake process between the server and client appears as follows: Request URL: ws://localhost:8015/ Request Method: GET Status Code: 101 Switching Protocols Request ...

How can you specify the maximum width and height for a TextField in JavaFX using CSS?

Is there a way to set preferred and maximum width and height for a TextField using CSS? ...

The Node.js Express undefined callback function is causing issues

I'm currently working on a personal project and I don't have much experience with nodeJS. My goal is to retrieve remote JSON data, generate statistics based on that data, and display it. However, I am encountering some issues with the callback fu ...

Having trouble with Next-Auth's signIn with Credentials feature in NextJS?

I have recently added the next-auth package to my new Next.js project. Despite following all the documentation for both Next.js and next-auth, I am still unable to resolve the issue. The problem I am encountering is as follows: I am trying to log in to my ...