How To Embed YouTube Videos in Responsive Design Websites

[fve]http://youtu.be/xVfR4TeGuTk[/fve]
We recently redesigned our website to make it more funnel optimized and upgraded it to a responsive design website so it would render on smartphones. But this created one big problem – our videos didn’t resize with the rest of the site on mobile. To fix that we had to either invest in additional code, or find a simpler solution.

Creating Fluid Video Embeds

After a few emails and a lot of searching online, I finally figured out a quick, simple and FREE way to create YouTube and Vimeo embedded videos that are fluid versus static sized. That means, as the browser size shrinks, the videos shrink (proportionally) as well.

Before I found the solution, the site would scale to match the browser screen size, but the videos would remain at their fixed dimensions resulting in a video that bled off the screen forcing the viewer to scroll right or left.

This created a huge issue on our Digital Keynote Speaker page, where we have both YouTube and Vimeo embedded videos of various keynotes and breakout sessions I’ve given at conferences. But if you watch the video on this post or any of the videos on the Keynote Speaker page, you’ll notice they scale proportionally as you view the page on different sized browsers or on your smartphone.

How To Create Fluid Embedded Videos

If you’re on WordPress, it’s simple. If you’re not, well I can’t help you. This solution only works on WP sites.

From your WordPress Control Panel, click on Plugins on the left hand tool bar. Go to Add New and in the search box, type Fluid Video Embeds. Then just install and activate the plugin like any other WordPress Plugin.

Once you do that, you’ll just change the way you embed videos in your pages and posts.

How To Embed Fluid Videos

To embed a video, just go to YouTube or Vimeo and get the Share Link for the video you want to embed.

Once you have that, you just navigate to where you want to insert the video. You’ll need to be in the HTML view of your page or post.

Then, at the point you want to insert the video, type this with your video replacing the YouTube link:

And that’s it. Once you preview or publish the post or page, the video will automatically scale proportionally.

One Place Your Videos Won’t Be Fluid

I did notice one little issue. While the videos work great on a smartphone that is being held in portrait (vertically), if you turn the phone to landscape view (horizontal) the videos don’t scale properly.

This could be an issue with my theme — or the plugin — I’m not sure. But it’s a small glitch that is perfectly acceptable in my opinion given the cost of the solution we’re using

If anyone happens to know a simple fix for that… be most appreciative of you sharing that in the comments.