Knowledge for the World

How to make YouTube videos responsive (without JS)

Surprisingly, normal YouTube embeds are not automatically sized to the browser window as it is resized. Luckily, you can make YouTube videos responsive and mobile-friendly with some simple HTML and CSS.

1

Wrap your embed code in a unique video wrapper (the class name is arbitrary). I chose to use embed-youtube as the selector.

2

Add the following to your stylesheet: .embed-youtube { position: relative; padding-bottom: 56.25%; /* - 16:9 aspect ratio (most common) */ /* padding-bottom: 62.5%; - 16:10 aspect ratio */ /* padding-bottom: 75%; - 4:3 aspect ratio */ padding-top: 30px; height: 0; overflow: hidden; } .embed-youtube iframe, .embed-youtube object, .embed-youtube embed { border: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

3

Resize your browser window and bask in the responsive glory.