How To Create Fluid Embedded Videos in Wordpress 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.

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:

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.

Reducing High-Ticket Offer Shopping Cart Abandonment

The 7 Deadly Sins of B2B Gated Content Marketing

How To: Creating Content Publishers Will Love

Networking for Introverts: How to Use Curated Content in Sales Prospecting

ChatGPT’s 8 Tips: Creating Content Marketing That Outperforms AI Tools

Successful Post Pandemic B2B Content Marketing Strategies Require…

B2B Content Strategy: How to Create 2nd-Click Content That Drives Sales

Flip Your Customer the BiRD – The Missing Link Between Branding and Profit

The Common Thread to AdAge’s Most Successful Marketers of 2021

The Psychology of Selling and Persuading

Cold Calling with Content: The Most Successful Sales Prospecting Technique You’re Not Using

Don't miss the next great article

Subscribe today to get the best Painless Prospecting content delivered directly to your inbox.

About the author

Tweet 0

Share 0

Tom is 30 year veteran of the sales & marketing industry with a penchant for stiff drinks, good debates and showing others how to combine the power of digital platforms and technology with the science of persuasion to turn conversations into customers.

He is the founder of Converse Digital, a former contributing writer for Advertising Age, and author of The Invisible Sale regarded by readers as a "must-read for any marketing and sales team."

The Invisible Sale has been described as: showing the reader how to rip down the communication barrier between sales and marketing teams in an easy-to-digest look at how both teams can work together to attract, measure, and close prospects in today's online landscape.

In the book, Tom breaks down his entire business development process, honed over a decade of practice, to create the ultimate field guide for anyone tasked with creating an effective business development program for themselves, their agency, or company.

And for those seeking to learn more about the art and science of persuasion, modern digitally oriented prospecting, effective lead nurturing without becoming a nuisance and closing more business deals, Tom has authored hundreds of articles available via his Painless Prospecting Newsletter Archives.

He is also a highly sought after sales & marketing keynote speaker who has graced stages in 52 cities, 27 states, and 7 countries spread across 4 continents.

He primarily speaking on topics of sales, business development, social selling, social media and the power of consumer experiences shared via social media as the ultimate form of advertising.

Tom's probably best known for his incredibly successful, groundbreaking social media campaign to rebrand Mardi Gras from "girls gone wild" to "family friendly fun" using nothing other than social media. That work led him to create his signature tourism marketing keynote -- The Soundtrack of our Life: Leveraging Visitor Experiences To Drive Visitation.

Too learn more about Tom's most requested talks, or check his availability, visit his professional speaker page.

You can also follow him on Twitter or connect with him on LinkedIn.

How To Embed YouTube Videos in Responsive Design Websites