Have you ever embedded a YouTube or Vimeo video into your WordPress site, only to cringe at how it appears misshapen or cut off on mobile?
Non-responsive videos are frustrating for both site owners and visitors. But with a lightweight jQuery plugin called FitVids, you can easily make video embeds scale beautifully across all devices.
In this definitive guide, I’ll show you how to properly setup and configure FitVids for superb responsive WordPress videos every time.
The Pain of Non-Responsive Videos
Before jumping into the solution, let’s briefly understand the actual problem faced:
Poorly sized video embeds are annoyingly common on WordPress sites. For example, a widescreen YouTube video may appear compressed on mobile, with important parts truncated. This creates a terrible user experience.
The main culprits for non-responsive videos include:
- Hard-coded video dimensions using CSS pixels
- Lack of scaling for small screens
- Issues serving different video file formats
In fact, a recent survey found over 65% of users will stop watching a video if not easily viewable on their device.
And getting videos to play nice across multiple devices is hard to do manually – from tweaking endless CSS values to detect screen sizes.
Wouldn’t it be nice if video embeds resized proportionally on their own? The good news is – they can!
Effortlessly Make Videos Responsive with FitVids
This is where the free and open source FitVids JavaScript plugin shines…
FitVids is created by widely respected web developer Chris Coyier and Paravel to intelligently handle video responsiveness. By wrapping embeds in div containers with specific CSS, FitVids makes your videos fluid width to fit any screen size without losing aspect ratio.
Now videos scale up or down smoothly as visitors access your site across desktops, tablets, and mobile. It just works out of the box!
Let’s explore how to harness FitVids for superior responsive WordPress videos:
Why Web Designers Love Using FitVids
FitVids has remained popular for years due to its simplicity and performance. Benefits include:
- Lightweight at only 2KB minified JS
- Saves tons of dev time over coding manually
- Works perfectly with widely used platforms like YouTube and Vimeo
- Supported in all modern browsers
- Easy integration for beginners
- Customizable with jQuery selectors
- Open source and well-documented
For such a tiny script, FitVids offers enormous responsive video benefits.
Install Using the FitVids Plugin (Easiest Method)
To enable FitVids fast, use the official WordPress plugin:
Search “FitVids” to install
Activate the plugin
Navigate to Appearance > FitVids
Enter CSS selector such as
.post, then save:
And done! FitVids will now resize videos matching that selector across site.
Total time: under 60 seconds for radically better responsive embed experience!
Install FitVids Manually for More Control
Experienced users can manually add the FitVids JavaScript file for greater flexibility:
Place
fitvids.jsinto the/theme/js/folder:Enqueue the script properly:
wp_enqueue_script( ‘fitvids‘, get_template_directory_uri() . ‘/js/fitvids.js‘, array(‘jquery‘), ‘‘, TRUE);- Initialize FitVids on target containers with jQuery:
$(‘.fluid-vids‘).fitVids();This allows applying FitVids behavior only where you need it.
Bonus Tips for Better Responsive Videos
Follow these additional tips:
- For YouTube, add
?wmode=transparentparameter for extra smoothness - Use jQuery events like
.resize()for dynamic functionality - Set a max-width on containers on ultra-wide screens
- Compress video files with Av1 codec for better performance
FitVids vs Other Responsive Video Options
How does FitVids compare to other solutions? See this overview:
| Method | Pros | Cons |
|---|---|---|
| FitVids (jQuery) | Lightweight, customizable, easy to implement | Requires JavaScript enabled |
| Native HTML5 video | No libraries needed | More coding, browser limits |
| Video.js | Advanced features | Steeper learning curve |
As shown above, FitVids strikes the optimal balance of simplicity and customization for most use cases.
But check out our full comparison guide covering 10+ methods for making videos responsive inside WordPress.
Conclusion & Next Steps
I hope this guide helped you understand the immense value FitVids provides in enhancing embedded video responsiveness at scale in WordPress.
Specifically, we covered:
- The frustrating problem of non-responsive videos
- How FitVids elegantly solves this issue
- Installing via both the plugin and manual methods
- Extra configuration tips for optimal results
Please let me know if you have any other questions! I‘m happy to help fellow video enthusiasts.
And for more resources, check out these tutorials and official plugin documentation:
I look forward to hearing about your sucess making videos beautifully responsive using FitVids!
