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;
}
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
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

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 Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 25/01/2021
3176 People Used
Only 97 Left
Rating
5.0