How To Embed YouTube Videos in Responsive Design Websites


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.

Book Tom Martin Digital Keynote Speaker To Speak

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:

Embed Fluid Videos on WordPress Sites

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.

The Invisible Sale

Stop losing leads and sales to digitally savvy competitors. Take the first step in building your own Painless Prospecting platform that drives leads while you sleep.
  

  • Research shows that today's “self-educated buyers” are more than halfway through the buying decision process before they even contact you.
  • Discover Ppropinquity - the science of relationship formation
  • Learn how to create a Behavioral Email effort to make every sales call count
  • Social Selling Explained: tips, tricks and strategies for prospecting directly via Twitter, Facebook and LinkedIn
  • Learn how to Rightsize your marketing content: saving money by matching production quality to your specific marketing and sales needs
  • Learn from the Pros: suggestions for choosing devices, apps, software, and accessories for quickly creating high-quality DIY content
  • Real-life B2B and B2C case studies showing how others have applied Tom's techniques

Buy Your Copy Today!

Insight & Information

Once a month. Everything you should be reading but aren't.

Painless Prospecting

Social Selling tips, tactics & strategies to improve your sales.

About Tom Martin

Tom is 20+ year veteran of the marketing and advertising industry with a penchant for stiff drinks, good debates and digital gadgets that helps digitally challenged companies create innovative and effective digital marketing strategies. He is the founder of Converse Digital , author of The Invisible Sale and a contributing writer for Advertising Age. Tom guides clients through the digital marketing maze and helps companies teach their sales force how to Painlessly Prospect their way to more sales. Connect with him on Google+ or follow him on Twitter or connect with him on LinkedIn.

Comments

  1. You are not alone! Thanks for this very helpful information.

  2. Hey Tom, I just realized something with our standard Genesis CSS. We have the “previous” method of embedding YouTube covered with responsive, as we currently include this in our style sheet:

    embed,
    img,
    object,
    video {
    max-width: 100%;
    }

    The thing we missed (which is relatively new to YouTube) is that they changed their HTML code from “embed” to “iframe”. If you use something like this below, it should respond to the viewing device:

    embed,
    iframe,
    img,
    object,
    video {
    max-width: 100%;
    }

  3. You’re so smart… Great tips! Keep ‘em coming!!

    • HA! No, I just know how to search for things ;-)

      Stay tuned… Rafal from Copyblogger (the folks that did my site) sent me some code stuff… which I’ll add here too if it works. But first I have to figure it out ;-)

  4. Have you ever considered about including a little bit more than just your articles?
    I mean, what you say is fundamental and all. Nevertheless think of if you added some great
    visuals or videos to give your posts more, “pop”! Your content is excellent but with pics and clips, this website could
    undeniably be one of the best in its niche.
    Great blog!

  5. Tom, for some reason, all I’m seeing is a blank (black) screen where the video should be. The YouTube logo shows up if you hover the cursor over the video but that’s it.

  6. THis is such a great fix, instead of me spending hours trying to fix this, your email and that plugin worked the first time.

    I tested it on all browsers and it seemed to work great.

    Sam

  7. Thanks ! Helped me out alot. Was struggling with this for over 5 hours.

Speak Your Mind

*