A Perfect Video Container with CSS

Tyler Duprey
4 min readAug 12, 2020

A step-by-step guide to a fluid-width 16:9 aspect ratio container for video iFrames using HTML and CSS. Thanks Dave Rupert for this trick.

A screenshot from my video tutorial here: https://www.youtube.com/watch?v=vrx4DHhr36A

Step 1: Remove any height or width inline-styles on your iframe of choice.

For this project we’ll need an iframe from any video sharing site of our choice. I’m going to chose an iframe for a…

--

--

Tyler Duprey

I am a professional web developer in Ontario, Canada. Learn Web Development for Free.