The rich, vibrant world of your video game deserves so much more than a simple, static image. That’s not to put down the many still images that will come to represent your game, of course. Posters, box art, screenshots are all important, of course, but when it comes to your game’s official site, what better way to instantly show off your game’s world, tone, and mechanics than a live video that greets players and the press?
While remodeling our own site, we at Mega Cat realized that while gameplay GIFs are wonderfully quick and shareable, and trailers can be stuffed full of detail, we needed something in between - say hello to looping video.
By using these looping videos where we might have formerly employed GIFs, we’ve discovered that we not only modernize the look and feel of our landing pages, but we also raise engagement and reduce bandwidth costs. It’s an all-around win. Here’s a rundown of what you’ll need to use looping videos on your own game’s website.
This part might seem obvious, but a surprising number of folks disregard how important it is to decide on what to show off with their website’s looping videos. You have to decide what the purpose of your video will be - are you showing off your gameplay, or just setting a mood on your site? If you’re going down the gameplay route, perhaps consider capturing a clip that shows off your game’s mechanics in a short amount of time. Your clip shouldn’t be particularly lengthy - you’re not trying to build a trailer here - you’re just demonstrating a mechanic!
The clip should be an MP4. This format offers higher quality and doubles the bandwidth efficiency of GIFs. Trying to use GIFs for this purpose could be disastrous for users on mobile devices.
The WebM format is another option for your footage. It offers similar advantages to MP4 while being open source and supported by a wide variety of browsers. The main advantage of WebM, however, is that while it’s on its way to being universally supported, it’s not quite where MP4 is now. It does, however, offer smaller file sizes and the majority of modern web browsers do support WebM playback.
If you’re looking to use a looping video to set a vibe on your site rather than to show off gameplay, you’re going to need a video that’s a little bit more akin to a poster than a trailer. Chances are, you don’t want a lot of fast or big motion, but something gentler and slower that fits well into your website’s overall design.
What you want here is a cinemagraph; we recommend taking a look at this tutorial for guidance on how to go about creating one. While it’s focused on creating cinemagraphs using live-action video, the same principles apply to your game.
When it comes to integrating the footage into your website’s code, you’ll either want to forward your footage to your web designer or get to work on it yourself, testing to make sure the video looks good both on desktop as well as mobile platforms. When it comes to the necessary code, we recommend taking a look at this resource on Stack Overflow for how to best integrate the video while hiding the player functions.
Have you integrated looping video into your site, and if so, are there any practices you recommend? Let us know in the comments below.
