How To Display Mobile Friendly Responsive Videos

Share

How To Display Mobile Friendly Responsive Videos

I have said it before and I will say it again, the future is mobile!  There is no getting away from it, more and more people are surfing the web via their mobile phones.  That is why it is VITAL that your website is “mobile friendly” and responsive to your visitors.  Now this post isn’t about responsive websites in general (though you can read more about that here), but more to do with one particular aspect – displaying mobile friendly responsive videos on your site!

Why Is It Important To Display Responsive Videos?

As bloggers, we are always looking to produce and deliver the best content that we can to our readers (or at least you should be).  This can be in many forms, one of which includes videos.

Videos are great as they can engage your visitors like no other method.  They can capture your user’s attention with visuals, audio and music, they are great for tutorials, Q&A sessions, recorded webinars, events, etc.  the list is endless!  The best part though is that they can easily be added to your blog posts to make them more interesting…. or can they?

Current Problem With Adding Video

As it stands, when you add a video from YouTube or Vimeo to a WordPress blog post (not sure about other CMS’s) it doesn’t resize it.  It stays the same size.  This is pretty bad as, depending on the size, it can make it near on impossible to watch on a small screen, no matter which way you hold it.

Responsive Videos

Notice that even in landscape mode, the video is being clipped slightly.

Now, you may think that you could just manually resize the video to naturally fit on a small screen, which of course you can do, but then you have to show the video really small on your regular site.

Surely there is a way round this?  Well thankfully there is!

How To Display Responsive Videos?

I faced this exact dilemma when I switched to our new look site.  We had a responsive website, which resized everything to fit nicely on a mobile screen… apart from videos.  Luckily I found a WordPress plugin called ‘Fluid Video Embeds’ that you can use to automatically resize all your videos to fit nicely on your site (whether you are on a mobile, tablet or desktop).

Responsive Videos

This great little FREE plugin makes it really easy to resize all your videos to fit on screen, whilst keeping the original aspect ratio.  Simply install it on your WordPress site and it’s ready to go, no need to perform with any set-up process.

I’ve been running it on this site for a month or two now and I haven’t had any problems with it.  In fact, I keep forgetting about it to be honest, it works that well.

Responsive Videos

Now the video displays perfectly in both portrait and landscape mode.

Have you used the ‘Fluid Video Embeds’ plugin on your site?  Maybe you know of another plugin that you can use to display responsive videos?  What is your opinion of the move towards responsive web design? Please let us know by leaving a comment below!

…oh and before I forget, here is one of my videos for you to test on your mobile (the one from the images above).

About Matt Smith

Matt Smith is the founder and editor of OnlineIncomeTeacher. He is a Professional Blogger, SEO Consultant & Web Developer, running a number of sites from the UK. Connect with him on Twitter, Facebook, Google+ and LinkedIn.

  • Clair Trebes

    This looks like a great plugin Matt! I don’t use a lot of videos on my site, but i think its important to make sure that people can view these on whatever device they want! So i’ll be adding this to all of the sites i’m in charge of! Thanks Matt!

    • http://onlineincometeacher.com/ Matt Smith

      HI Clair,

      Like you, I don’t use that many videos on my site, but it’s good to know that when I do they work perfectly on mobile devices. Such a great plugin and all you have to do is install it, no setup. Can’t go wrong really :)

  • Brandon Koots

    It will be a great a great plug in to use if I ever start my YouTube channel. I still have to get inspirations of what to make videos about

    • http://onlineincometeacher.com/ Matt Smith

      Hi Brandon,

      There must be thousands of things you could make a video about. Gardening tutorials can be quite popular online, so start with the basics and work your way up.

      Remember though, you can still add videos by others to your posts. Find ones that relate to what you are talking about and embed them in your posts.

      • Brandon Koots

        That is true actually. I think my first video can be an introduction of my own garden. So others can see it.
        I don’t get many good videos related closely to my blog posts.
        Maybe I should search better

        • http://onlineincometeacher.com/ Matt Smith

          Maybe there aren’t any closely related videos because nobody has made them yet! You could be just the right person to make them for others who are searching for the same thing.

          They don’t have to be long videos. 2-5 minute videos can grab people’s attention, whilst allowing you to make a lot more bite-sized content for your site.

  • Pingback: Quality Content – The Lifeblood Of Your Website | BizzeBee