Best Practices for Displaying Trailers on a Website
Designing for Trailers on the Web
Let’s look at using trailers on websites. Below are screen shots of the Rotten Tomatoes website. This is the home of the Tomatometer which features prominently on the home page in listings of movies down the left hand side of the site. Thumbnails are used to feature trailers and clips. Rotten Tomatoes uses images to also feature additional trailers, clips, and photos right below cast info on title pages.
When designing your own slide show or displays of multiple titles you can use our standard still image, which is 320×240, or choose IVA’s Custom Image Service, which allows you to choose a 4×3 or 16×9 aspect ratio.
The ‘play trailer’ button is right below the movie poster. The trailer plays in an IVA Cross Platform overlay player that is displayed over a screened out portion of the webpage. This has the advantage of showing the trailer to its best advantage while keeping the consumer on the same page. Rotten Tomatoes even includes thumbnail info about the movie along with social sharing and a movie poll.
Here is one of IVA’s early clients, the UK online rental company LOVEFilm. On this title page they give you the option of either playing the trailer or going right to the online video. Some sites have the trailer play automatically. Most design guides advise against having audio or video launch automatically, but because the trailer is what the consumer has come for it can be made to work on entertainment sites.
Another way to expose your customer to more video is to display thumbnails of other titles right in the player. Look at this example from the Video Detective site:
In this example, there are 54 videos related to the main title, so additional thumbnails of videos are displayed right below the player. Below that are trailers for other movies, so the consumer has a lot to choose from on this page.
So far we’ve been looking at sites showcasing movie trailers, but these design principles work just as well for television programs. Here’s an example from NextGuide to illustrate using both trailers for the program season as well as trailers for individual episodes.
That’s it! Good luck with your project!