It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

Adding and Embedding Responsive Videos by Using CSS Properties

Reading time 2 min
Published Aug 8, 2017
Updated Oct 1, 2019

TL;DR — Responsive CSS videos adjust to different screen sizes and orientations. The width and max-width properties add responsiveness to video content.

Adding responsive videos

A responsive CSS video keeps quality and aspect ratio when you resize the window or change its orientation. You can set CSS width to scale videos responsively.

Setting the width to scale videos

The following example scales the video player. It becomes a responsive video after you set the width property to 100%.

Example
video {
    width: 100%;
    height: auto;
}

Note: the example above allows scaling up until the video becomes larger than its original size. It might cause quality issues when displayed on a bigger screen.

To prevent the responsive video from exceeding its original size, set the max-width property to 100% (to enable the video to freely scale down but not up).

Example
video {
    max-width: 100%;
    height: auto;
}

Responsive video embed

You might want to make youtube video responsive. Embedding of Youtube videos happens with the <iframe< element (tutorial here), but the embedded videos might not be responsive.

To add a responsive Youtube embed, you should add CSS properties to the HTML code as in the following code example:

Example
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0px;
  height: 0;
  overflow: hidden;
}

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

CSS video: useful tip

  • Bootstrap also offers an option for adding responsive video embed by using the .embed-responsive class.