How To Make Embedded Video Responsive and Fit Browser Width In WordPress Using FitVids WordPress Plugin
Video embeds are very commons thanks to the video sharing site like YouTube which allow embedding in webpages using the embed codes, but the embedded videos are not responsive in nature by default.By responsive I mean that the embedded videos do not adjust to the screen size automatically.These webpages are accessible across various devices and have different screen sizes so it so very important to make sure that your embedded videos does not disrupt the reading experience.
If you already have a lot of embedded videos on various posts, changing the embed sizes is not easy for each theme change or to suite the embed for each screen size.Here FitVids For WordPress which does the job very well and adjust the embedded video according the screen size of the visitor.FitVids is a jQuery Addon which can be used with any website, and more easily in wordpress using the FitVids WordPress Plugin.It currently supports Vimeo,YouTube, Blip.tv, Viddler, Kickstarter out of the box.
Here’s how to use the plugin in WordPress :
- Download, Install and Activate the plugin, next
- Go the FitVids For WordPress Settings page which can be found under Appearance > FitVids
- How To Enhance YouTube Player For Embed Video’s
- Test How Your WebSite Looks On Various Devices At Once Using ScreenFly
To identify the CSS selector for your WP Theme, open the single.php in your theme folder and check the CSS Selector inside which you have the the_content called.This becomes the selector which needs to be inserted in the box as the arrow points in the image above.
If the css selector is a Class then type .selector or if if it’s a id then #selector
Here’s the screeenshot embedding a wider video overlapping the Sidebar In WordPress :
Here’s the video auto resized using FitVids For WordPress :
Then What about handheld devices like Mobile Phones, SmartPhone, Tablets, etc, ??
Even that’s supported, just try resizing the browser to test the responsiveness or try opening you webpage in a mobile or try resizing the browser window and the video adjust accordingly.
The best part of the plugin is that it works out of the box with all previous video embeds in old posts, which means no need to change anything in the embed code in old posts.Incase you are having trouble after settings the css selector, try adding jQuery from Google CDN by checking the box “ Add jQuery 1.7.2 from Google CDN ”.