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 will hold the video. This container is the one we're going to manipulate to give the video the width we want while maintaining its aspect ratio:

<div class="video-container"></div>

Then, we create a container for the video...