Making videos responsive

The videos we're going to talk about are the videos that come inside our good old friend, the <iframe> element, such as videos from YouTube, Vimeo, Dailymotion, and so on. There are several ways to make videos responsive, some more involving than others. Let's break it down.

Responsive videos with HTML and CSS

YouTube is an amazing video service that makes life easier for everyone—video authors, as well as web designers and developers. The fact that YouTube takes care of the hosting of the video, the streaming, and the technological conditions of browsers that don't support Flash (iOS), or browsers that don't support the <video> tag (legacy browsers), is just awesome.

The first thing we need to do is create a container that ...

Get Mastering Responsive Web Design now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.