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.