Today, one of the hottest trends in website design is the mobile responsive design. This allows your website to automatically be readjusted to the screen size on which it is being displayed, to your website visitor. When you consider the increasing percentage of online buyers, who are now using mobile devices, it makes sense to have a website which will respond to the environment where it’s being displayed.

For WordPress website owners the concept is very easy to achieve, as there a number of themes available, which are built to enable all websites to be mobile responsive. All you need to do is use a mobile responsive theme and you’re all set.
Embedding Videos with Mobile Devices in Mind

The Problem when Embedding Videos

One detail that’s often overlooked by website owners is the behaviour of an embedded video, within a mobile responsive theme. When you use the embed code for videos, which is provided by YouTube or Vimeo, you’ll discover that the code is not designed to meet the criteria, which will enable all mobile devices to display your videos correctly.

The problem, which occurs on a mobile device, is the website’s graphic components are adjusted to width of the device, but videos are not automatically adjusted. The website visitor, who’s viewing your website on their mobile device, will not see your video automatically adjust to fit their screen size. The visitor will only see a small part of your video, which makes your website look unprofessional and difficult for them to view.

The Solution

There are a few solutions for this problem, which will result in your visitors getting a professional and enjoyable viewing experience. Best of all, if you’ve already embedded videos on you website in the past, you can easily go back and change your settings, which will allow all your videos to be seen properly, no matter what mobile device your visitor is using.

The easiest way of fixing this type of problem, is by using a WordPress plugin. You’ll be pleased to know that there are a number of free plugins, which are available for you to use, and can be found in the WordPress Plugin Directory. Two that I have used with great success in the past can be found here:

Responsive Video Light

You’ll find that the “Responsive Video Light” plugin is simple to use, and will allow you to embed videos directly into any page, post or text widget. At the time this post was written, Responsive Video Light only supported YouTube and Vimeo video formats. I’m sure future upgrades will begin to support other popular formats.

When using this plugin, you find that all embedded videos will now be fully responsive to all mobile screen sizes. Your video’s viewport will fill the width of the containing area, and automatically scale to the screen size being used.

In this process you’ll only need to install the plugin and then when embedding a video, you’ll simply add a short bit of code to the post, page or text widget where you want the embedded video appear. You’ll no longer need to copy and paste YouTube or Vimeo embed codes.

For YouTube Videos

Both of the codes below will work identically, so choose either one.

[responsive_youtube http://www.youtube.com/watch?v=NbCr0UyoFJA]
[responsive_youtube NbCr0UyoFJA]

For Vimeo

[responsive_vimeo https://vimeo.com/29506088]
[responsive_vimeo 29506088]

When using the above, be sure to replace the video number with your own video URL or ID number.

Advanced Responsive Video Embedder

Advanced Responsive Video Embedder  – This is considered to be a simple plugin, which allows users to embed videos from a number of different providers. It uses “full responsive sizes” by using a shortcode or a URL. It will allow your videos to be opened in lightbox, shown as thumbnails and make your visitor’s experience more satisfying.

This plugin gives you a number of different customization options when embedding your video. It allows you to have your video show on your page the way you want. You’ll be able to customize the URL parameters, and use a set of defaults, so your videos become a part of your page and gives your visitors a more engaging experience.

When it comes using YouTube, the advantage this plugin offers is that it allows you to specify various parameters and customize the way the video will look on your website. (See post about embedding YouTube videos with style.) You’ll find the user interface will allow you to set different parameters in your WordPress dashboard under Settings> A. R. Video Embedder Settings.

When you’re at this page, simply scroll down until you find the area titled “Set Custom Parameters,” which is located at the bottom in the “YouTube Parameter Box.” By default, the plugin already has some parameters set, and you can add additional parameters, which you may want to use.

youtube-parameters

To embed a video, use the short code creator, which will then be added to your post/page editor area, once you’ve install the plugin:

Advanced Responsive Video Embedder Short Code Creator

 

Additionally, you can add the shortcode directly into your post, page or text widget. The simplest shortcode looks like this:

and in most cases it’s all you’ll need.

Today, plugins allow you to customize your page in such a way that any mobile device will work correctly, and provide your visitor with an exceptional experience. Nothing is more annoying to visitors than a video which does not load correctly for their device.