Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create a full screen video background with CSS?

CSS Web Development Front End Technology

Creating a full-screen video background with CSS is a popular technique for modern websites. This effect uses a video element that covers the entire viewport, with overlay content positioned on top of it.

Syntax

.video-background {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

Key Properties

Property Purpose
position: fixed Positions video relative to viewport
min-width: 100% Ensures video covers full width
min-height: 100% Ensures video covers full height
object-fit: cover Maintains aspect ratio while covering area

Example: Full Screen Video Background

The following example creates a full-screen video background with overlay content and play/pause functionality −

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    * {
        box-sizing: border-box;
    }
    body {
        margin: 0;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .backgroundVideo {
        position: fixed;
        top: 0;
        left: 0;
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
        z-index: -1;
    }
    .content {
        position: relative;
        z-index: 1;
        background: rgba(0, 0, 0, 0.5);
        color: #f1f1f1;
        padding: 20px;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .playPauseBtn {
        width: 200px;
        font-size: 18px;
        padding: 12px;
        border: none;
        background: #4834a7;
        color: #fff;
        cursor: pointer;
        opacity: 0.8;
        border-radius: 5px;
        margin-top: 20px;
    }
    .playPauseBtn:hover {
        opacity: 1;
    }
    h1 {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    h2 {
        font-size: 1.5rem;
        font-weight: 300;
    }
</style>
</head>
<body>
    <video autoplay muted loop class="backgroundVideo">
        <source src="https://sample-videos.com/zip/10/mp4/mp4/SampleVideo_1280x720_1mb.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    
    <div class="content">
        <h1>Welcome</h1>
        <h2>Full Screen Video Background</h2>
        <button class="playPauseBtn">Pause</button>
    </div>

    <script>
        const video = document.querySelector('.backgroundVideo');
        const btn = document.querySelector('.playPauseBtn');
        
        btn.addEventListener('click', function() {
            if (video.paused) {
                video.play();
                btn.textContent = 'Pause';
            } else {
                video.pause();
                btn.textContent = 'Play';
            }
        });
    </script>
</body>
</html>

A full-screen video plays in the background with centered overlay content including a heading, subheading, and a play/pause button. The video covers the entire viewport while maintaining its aspect ratio.

Key Points

  • Use position: fixed to position the video relative to the viewport
  • Set z-index: -1 on the video to keep it behind other content
  • The object-fit: cover property ensures the video covers the entire area while maintaining aspect ratio
  • Always include autoplay, muted, and loop attributes for background videos
  • Provide a fallback message for browsers that don't support the video element

Conclusion

Full-screen video backgrounds create engaging, modern web experiences. The key is proper positioning with CSS and ensuring the video covers the entire viewport while keeping overlay content accessible and readable.

Updated on: 2026-03-15T14:43:53+05:30

634 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements