So you’ve made the leap; you’re now the proud owner of your new mobile responsive website. It looks awesome on a desktop monitor, but still functions great on a smartphone.
But now you’re checking out the website on your iPhone, scrolling down, reading blog posts, when you come to a post in which you’ve embedded a video from YouTube, Vimeo or another video sharing site. Your mobile responsive joy quickly fades.
You see that only a little less than half of the video is showing on the screen. In many cases it might just be a black square and you can’t even see the play button. Sure, you know it’s a video because you put it there. To the rest of the world it just looks like something that didn’t make it into the mobile responsive world. Don’t worry, you won’t have to accept this setback!
Solutions for Responsive Video
Responsive Video Embed (WordPress plugin)
There are a few different plugins available that have been created to help your embedded videos shrink to accommodate smaller size screens. I’ve tried a few. Some were a little buggy. Others worked, but it would’ve required me to go back and modify every post in which I’ve embedded a video. Wasn’t looking to do that.
The Responsive Video Embed plugin works well. You just install the plugin and it will work for the videos you’ve already embedded on the site, as well as any new ones to come.
One thing you need to be aware of. If you’re embedding a video from YouTube you need to make sure to check the box that says, “Use Old Embed Code.” If you don’t select that, this plugin won’t have any effect on your video.
You can get the free Responsive Video Embed plugin from the WordPress.org plugin repository: http://wordpress.org/extend/plugins/responsive-video-embeds/
Responsive Video for Genesis Framework Sites
Warning: this solution is only for those of you who feel comfortable getting your hands dirty working (minimally) with code and files under the hood. It will require adding a little code to your functions.php file (why did I just feel the room empty out 🙂 ) and uploading a file to your child theme folder. (okay, now I know I’m here by myself)
For anyone still reading, if you’re running a Genesis site (you are if you’re one of my clients) there’s a solution you can build right into your Genesis Framework (affiliate link). I’m not going to go into it here, but it’s covered very effectively in an article on NeatandPlain.com. The cool thing is, if you do go this route you no longer need to use the embed code. Just copy and paste the URL for the video into your page/post and you’re done.
Read the full article here: http://neatandplain.com/responsive-youtube-or-vimeo-videos-in-genesis/
Test Drive
I’m using the Responsive Video Embed plugin on this site. To show you how it works I’ve embedded a video I took of my nephew last weekend. You don’t have to watch it to see the effect of the plugin. All you need to do is look at this post on your smartphone, or if you’re on a desktop or laptop computer, grab the lower right corner of your bowser window and drag it in, making the browser window smaller and smaller. You’ll see the video adjust in size to accommodate the window size.
So anyway, you can now reclaim your mobile responsive joy and keep posting those videos on your site!
