Video 100% width and height

Achieving 100% Width and Height for HTML5 Video

Learn how to make your HTML5 video elements fill their container or the entire viewport, ensuring a responsive and immersive user experience.

Embedding video content on the web is a common requirement, and often, you'll want that video to occupy the full width and height of its parent container or even the entire browser viewport. This is crucial for creating immersive backgrounds, full-screen galleries, or responsive media players. This article will guide you through various CSS techniques to achieve 100% width and height for your HTML5 video elements, covering both container-based and viewport-based sizing.

Understanding the Challenge

By default, an HTML5 <video> element will render at its intrinsic dimensions or scale to fit its content if width and height attributes are specified. However, simply setting width: 100%; height: 100%; in CSS often doesn't yield the desired full-fill effect, especially when dealing with aspect ratios. The video might stretch disproportionately or leave empty spaces. The key is to manage both the video's dimensions and its aspect ratio effectively within the given space.

flowchart TD
    A[Start] --> B{Video Element Added?}
    B -- Yes --> C{Desired Fill?}
    C -- Container --> D[Parent Container Defined]
    C -- Viewport --> E[Viewport as Target]
    D --> F{CSS: `position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;`}
    E --> F
    F --> G[Result: Video Fills Space]
    B -- No --> A
    G --> H[End]

Workflow for achieving 100% video fill.

Filling the Parent Container

To make a video fill its parent container, you typically need to make the video an absolutely positioned element within a relatively positioned parent. This allows the video to stretch to the parent's boundaries. The object-fit CSS property is then essential to handle the video's aspect ratio without distorting it.

<div class="video-container">
  <video autoplay loop muted playsinline>
    <source src="your-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

.video-container {
  position: relative;
  width: 100%;
  height: 400px; /* Or any desired height */
  overflow: hidden; /* Hide overflowing video parts */
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* This is key! */
  object-position: center; /* Center the video content */
}

Filling the Entire Viewport (Full Screen Background)

For a full-screen video background, you can apply similar principles but target the body or a top-level container. Using position: fixed; is often preferred for background videos as it keeps the video in place even when the user scrolls.

<video autoplay loop muted playsinline id="fullscreen-video-background">
  <source src="your-background-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<div class="content-overlay">
  <h1>Welcome to My Site</h1>
  <p>This is some overlay content.</p>
</div>

body {
  margin: 0;
  overflow: hidden; /* Prevent scrollbars if video is larger than viewport */
}

#fullscreen-video-background {
  position: fixed; /* Or absolute if content doesn't scroll */
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1; /* Place behind other content */
  background-size: cover; /* Fallback for older browsers */
  object-fit: cover; /* Modern way to cover */
}

.content-overlay {
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
  padding-top: 20vh; /* Example spacing */
}

Responsive Aspect Ratio with Padding-Bottom Hack

Sometimes, you need a video to maintain a specific aspect ratio (e.g., 16:9 or 4:3) while still being responsive and filling the available width. The 'padding-bottom hack' is a common technique for this, especially when object-fit isn't sufficient or you need the container to dictate the aspect ratio.

<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</div>

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100) */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
}

.video-wrapper iframe,
.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}