NOTE: On December 11, 2013, I wrote updated instructions for this plugin to capture some enhancements. You can see these at Responsive Video In Your WordPress website has gone from easy to simple.
Have you ever looked at your website on a mobile phone and noticed that the YouTube video you added to a page sticks out off the page?
In an ideal world, what we need is for the video box on your web page to grow or shrink with the size of your website being displayed on any device.
This can easily be achieved with a WordPress plugin called, Advanced Responsive Video Embedder.
The simple steps to responsive video on your WordPress site
Start by installing and activating this plugin via Plugins>Add New and searching for Advanced Responsive WordPress Embedder.
Check that you have the one authored by Nicolas Jonas.
Next, go to a YouTube video you have uploaded and copy the web address for that video (it should look something like https://www.youtube.com/watch?v=bjwgLOGITTg)
Then go to the Page or Post on your site where you want to embed that video and click on the page where you want your video to appear.
Next, look at your editing screen menu for the Clapper Board icon. It looks similar to the image above. Click it.
It will open a pop up box where you paste in your YouTube video link and make the following settings (these are my settings, you can choose your own of course):
- Mode – Normal
- Align – Left
- Click Show More Options
- Autoplay – No
- Max Width – left blank
- Click Insert Shortcode
Now just Publish or Update your Page or Post, and you are done. You will only see the code on the editing screen but when you view your site publicly, the video will appear.
Plus it is worth noting this plugin will also support responsive embedding of video from many other video sites, including Vimeo.
Here’s one I prepared earlier.
[youtube id=”80kFjGdNyds” mode=”normal” align=”left” autoplay=”no”]