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.

Latest Coupon Found:

Verified STAFF PICK

TOP-RATED CODING COURSES

Learn the skills of tomorrow

The best time to learn programming is now - follow this link to access 100+ coding courses and enjoy learning at a very low cost!

Expiration date: 13/05/2021
2287 People Used
Only 92 Left
Rating
5.0