How to Make Your Video And Images Responsive

As digital marketers, hopefully you’ve heard a lot making websites responsive. Responsive website design is the best way right now to have a website that performs well on mobile devices and performs well in the search engines.

Responsive design involves keeping URLs, site structure and content the same over all devices only changing the styling and layout. Sometimes the layout styling may remove certain blocks of content to improve user experience; however it removes the problem of duplicated site content on mobile versions.

We like to think our own Koozai website as a good example of Responsive Website Design so visit us on a mobile device or resize your browser to see it in action.

One key part of creating a responsive design is to ensure your videos and images are also truly responsive. If they don’t resize then you will likely end up with a messy looking mobile site with cropped images and videos that visitors can’t see fully or load.

Making text content and layout items responsive is relatively straightforward if fluid width div’s are used. However making your fixed width video and image files resize to fill any mobile device can seem a lot more complicated.

This post aims to provide a list of resources on how to implement responsive video and images on your website to make things simple.

Responsive Images

There are different ways of implementing resizing images and as yet no standard way of doing it. No existing models are ideal, for example some of them control the loading of multiple sized images via JavaScript, whilst others have images twice the required quality that are shrunk down. CSS expert Chris Coyier wrote a great post on the difficulties of implementing responsive images.

Technologies such as the HTML5 <picture> element may be solution in future for developing a standard method of responsive images but for now it requires a little more work.

CSS for Modern Browsers

If you’re happy to only support modern browsers (Tip: check your Google Analytics to see what browsers your audience are using) and not too worried about image file size and therefore load time then a simple CSS id should work ok:

This is a relatively straightforward method that switches image files for the size of the browser. It shows smaller image files on smaller screens, therefore helping to reduce load times and bandwidth usage. This version is designed to work well with your existing CMS systems and not break its code.

There is even a method used for delivering responsive images via Cookies.

Responsive Images the Easy Way

There is a service called ReSRC.it for delivering optimised versions of your images for each visitor’s device or browser size, on demand.

ReSRC is great looking tool that only requires you to add their code to your website. Simply add your image and ReSRC.it will deliver a version optimised for the biggest hi resolution displays right through to the smallest standard resolution devices. It’s powered by their custom JavaScript (not JQuery) and doesn’t require additional device detection or the use of cookies.

Responsive Videos

The new style of HTML5 video players are designed to keep their aspect ratio in the browser so implementing valid HTML5 <video> tags should work well for Responsive video players.

CSS for Modern Browsers

As with the image CSS technique, the following CSS code still holds true for video ids:

If you’re self-hosting videos, you may encounter issues with making your video player controls work correctly with just the above code and if you are enclosing your video in an iframe, additional code may be needed. Please see the this site for more information.

Sublime Video Player was a project started to create the best video player software to use with cloud hosted video files. Utilising everything HTML5 has to offer, this player is capable of resizing automatically and much more.

Technical knowledge is needed to set up the hosting of your video and implementing the video player code however it is a very polished solution offering everything you will need. It has also recently been acquired by the huge video sharing site, Dailymotion. Hopefully it will continue to be offered to users whether they use Dailymotion or not.

Responsive Videos The Easy Way

I’ve blogged in the past about the pros and cons of using third party video hosting services vs encoding and hosting your own video files. The truth is, the top video hosting services now include scripts to automatically resize videos to the browser or device. These services include:

Summary

I hope some of these resources will help you implement optimised, resizeable videos and images on your new responsive website design. Your visitors will place more trust in your website if they can view media correctly on any device. This will hopefully drive more conversions as well.

This is just a small sample of the resources available online. Do share the technique or resources you have used for your images in the comments section below for all to see.

Image Credits

Share this post

Dean Marsden will be keeping you up to speed with video marketing and conversion rate optimisation. Dean excels at delivering video marketing solutions for clients and specialises in converting website visitors into customers.

What do you think?

Related Posts

When you think about your overall Digital Marketing strategy you may have completely forgotten to consider what part Video Marketing will take in it. Really, you should be spending a lot more effort on your Video Marketing strategy. Here’s a few reasons why to factor in a Video Marketing Strategy into your overall plan: Search […]

Why does your business need to include video as part of its Content, Social, Email and Digital Marketing campaigns? Well, according to the team at Quick Sprout, there are many reasons. Today we are showcasing their Infographic which highlights the 25 reasons your business needs to get on board. Enjoy. Visual marketing is an integral […]

When it comes to video marketing you almost always think of YouTube, the leader of online video. However, this is just one segment of the market. Vine and Instagram are platforms with a burgeoning audience – and clever brands and marketers are taking full advantage. Here’s 10 great examples. Vine and Instagram also have a […]

To earn search engine rankings (Google Love) you need to provide users with a good ‘post click’ experience. A good user experience can be communicated to Google through quality bounce rate and the amount of time a user spends on your site. This post will look at user experience and how improving your bounce rate […]

Every blog is broken in some way. Once you accept that, it’s easier to make amends and to reshape your blog into something that drives conversions, attracts the right audience and ranks well in search engines. Recently I spoke at the Search London event on how you can identify the critical issues with your blog […]

Choosing to redesign your website isn’t a decision you should just make because you feel it needs to be updated. Many of your visitors may be put off by the change, so it’s important to make the redesign worthwhile – and that means having conversions at the forefront of your mind. Redesigning a website is […]

Since Broadband became the standard, web users have expected websites to load within a couple of seconds. Slow loading pages can have a surprisingly dramatic effect on the number of users who will purchase from your website. This means that slow sites are less effective at delivering a positive return on investment. This infographic from KissMetrics shows […]

Today I presented at On The Edge Bristol on the subject of Remarketing in 2014. A lot has changed with AdWords in recent years, especially the moving focus away from keywords and towards marketing to specific people and audiences. Below I’ve compiled all you need to know to get started with Remarketing and why it’s […]

It’s that time of year when the world of search is basted with a heavy brush of predictions ready for the next 12 months. Curious marketers gather round to share these stories, and recount them to others. If there’s one thing I have learned during 2014 it’s that no one can be certain what 2015 […]

2015: the year of the mobile… again? Hmm, possibly. One thing we can be certain about is that the popularity of mobile use is continuing to grow, especially in search. By 2016, it is expected that the majority of local searches will be made on mobile devices; this is just one indicator of increasing use. […]

Digital Marketing Ideas Every Month

Sign up to receive our free monthly email. Including our favourite pieces of news from the digital marketing industry.

From SEO to PPC, Social Media to Brand Management and Analytics, we'll keep you informed.