🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

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;
}

DataCamp
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
Udacity
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
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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.