You must have heard about responsive WordPress themes. A responsive theme is fluid and adaptive that properly adapts (resizes) to the device’s resolution that the website is begin viewed on. For example, the theme will look great on iPhone, iPad, Android, other tablets and phones because it will automatically resize all the images and content as per the device. But let’s say you don’t want to change your current theme but want to embed responsive videos to your WordPress based site. Fortunately, this is now possible with the help of a plugin.
To embed a video from YouTube, you can simply paste the URL of the video to your editor in WordPress. The code will be automatically inserted to the editor. This works great but the height and width is fixed. If you’re on a responsive theme then on some themes you will also observe that the video does not resize as it should. This doesn’t looks good as the video should have scaled as per your browser. Let’s learn how to embed responsive videos to posts and pages.
Embed Responsive Video To WordPress Posts
- Install and active FitVids for WordPress. This is a plugin that makes videos responsive using jQuery.
- Navigate to Appearance -> FitVids
- From here you can add selector and turn jQuery on or off.
- If you’re sure that your theme already includes jQuery 1.7 or above, then you don’t need to check mark add jQuery box. However, if you’re not sure then check mark “Add jQuery 1.7 from Google CDN“.
- Secondly, you’ll also need to add a CSS selector for FitVids to work. In most cases, it is body as shown in the above screenshot. Just enter “body” (without quotes) in the box provided.
That’s all you need to do. The video will now auto scale itself when the browser is resized.
Note that there is no need to tinker with the code of videos that you have embedded. All you need to do is to just install this plugin and configure it. This plugin will automatically make all of your videos in your site responsive.
[box type=”download”]Download FitVids for WordPress[/box]