In this era of responsive web design (RWD), many developers tend to make clients’ websites responsive. According to Wikipedia, RWD can be defined as:
An approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
A responsive WordPress themes are those themes that looks great on all screen sizes.
Mashable new theme with RWD concept. (Credit: Mashable)
To know whether your current theme is responsive or not, try resizing your browser size. If it looks great on different sizes, I can assure you that your theme is responsive. That’s good. Twenty Twelve, the default WordPress theme that came with WordPress 3.5 is an example of responsive theme.
To make a responsive theme, you have to make sure all the elements looks great on smaller browser. This includes the text, images and video. To make an image responsive, the basic rule is to set the width to 100%.
[css]
img {
max-width: 100%;
}
[/css]
That is easy and straight forward. However, when dealing with video, there’s no specific CSS code can be use to make all videos to be responsive (at least for now).
To make videos to be responsive, you can install Fitvids for WordPress plugin. It uses Fitvid.js script. Currently, the plugin supports these services:
- Youtube
- Vimeo
- Blip.tv
- Viddler
- Kickstarter
1. Install and activate the Fitvids for WordPress plugin.
2. To configure the plugin, go to Appearance > Fitvids.
3. You’re done. Or… in case the the video isn’t responsive yet, you can add custom class in the settings page. For example, let say the video is embedded in your article, and the class for your single post is .entry-content, then you can insert that as shown below:
4. The plugin only supports newly embedded video (the ones embedded after you’ve installed the plugin). If you want to make the video to be responsive in an old article, edit the article and simply hit the Update button.
Need to see an example of a responsive video?
Try resizing your browser size and see the video below.
Want to learn how to embed a video in WordPress? Read my very simple tutorial on Embedding Video in WordPress.
Leave a Comment