Placing A Background Video On A Section Of The Page

The problem I am having is that I can't place the background video on just a section of the page without taking the whole page and when I manage to do that it extends to the whole

Solution 1:

You have to place it inside that section and set the position of the page to relative so the background video will be positioned relative to that section not the body. and then use another positioned container (overlay) with higher z-index to place your content obove the video.

Updated based on your comment: Then you should do the same but this time place it inside header. I have set a min-height for header so you can see the effect. That can be the size of your content or you can keep it if you want to have a fullscreen background.

body
{
    margin: 0;
    padding: 0;
    line-height: 1.5;
    color: hsl(125, 73%, 55%);
}

:root
{
    --orange: hsl(41, 88%, 54%);
    --violet: hsl(295, 71%, 52%);
}

header
{
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    margin: 2rem;
    position: relative;
    min-height: 100vh;
}

#nav-bar {
  position: relative;
  z-index: 2;
  background: rgba(0,0,0,0.3);
}

/* Navigation Tabs */.nav-link
{
    color: var(--orange);
    text-decoration: none;
    font-size: 2rem;
    font-weight: 500;
    padding: 1rem;
}

#home {
  min-height: 100vh;
  background: red;
}

/* Background Video */#background-video, video
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: blue;
    z-index: 1;
}

<header><navid='nav-bar'><aclass='nav-link'href="#home">Home</a><aclass='nav-link'href="#skills">Skills</a><aclass='nav-link'href="#projects">Projects</a><aclass='nav-link'href="#contact">Contact</a></nav><sectionid='background-video'></section></header><main><sectionid='home'></section></main>