Building a responsive website requires many variables. You have to think about every element in the DOM and how it will react when the browser is resized. Here at RD2, we recently converted our site to be responsive. I have to say, it’s pretty awesome. But when I threw a YouTube video in one of our blog posts, it wasn’t responsive to the browser window or any smaller device.

Problem

Using WordPress’s auto embed feature, how can I modify the video’s width and height when I resize the browser using YouTube’s iframe code?

Answer

My original attempt at accomplishing this with CSS alone was not successful...