Responsive YouTube Embeds in WordPress

iFrames on a responsive website can be a pain, and unfortunately video embeds such as those from YouTube come supplied as an iFrame. Thankfully, there’s some simple code you can add to your WordPress Theme to automatically resize these embedded videos to fit neatly on your website.

This code wraps the iFrame in a div, and adds some classes. Then, the CSS resizes the object to a proper 16:9 proportion.

To get started, add the following code to your functions.php file:

You can also add this CSS to your stylesheet (you may need to tweak it based on your stylesheet):

This CSS is courtesy of the Bootstrap framework.

Get the Broadcast Technology Newsletter

Sign up for the email newsletter about media and technology. Sent irregularly. No spam.

I'm Anthony Eden, and I'm a IT Professional, Broadcast Technician, Software Developer, and Solutions Engineer. I've been working in broadcast media since 2008, and developing software and websites for just as long. Right now, I provide freelance services through Media Realm - in particular, to the media and not-for-profit industries.

Follow Anthony on Twitter: @anthony_eden