Adding and Embedding Responsive Videos by Using CSS Properties

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%.

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).

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

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

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:

.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.