Free HTML Movie Trailer Template

About a year ago, I decided to see what it would be like to build a one-page trailer website in the vain of how Apple displays each one of their trailers.

Although at first glance this single page might look simple, it contains several neat interactive features in the user experience.

The first option the visitor is given is a toggle to hide/show the sample trailers or cuts so that they can have a full look at the artwork.

Free HTML Template Hide Cuts Letter Eye Media

The next element after clicking on the video preference is your choice of SD/HD if you are streaming, and 480p, 720p, and 1080p for download.

Free HTML Template SD HD Quality Download Letter Eye Media

I think this template really speaks to the power of Vimeo hosting. Aside from what most people think, Vimeo can be privatized if you prefer, or it can make your video very publicly indexed for search optimization. If you are an independent film company, Vimeo is a must-have on the long list of social media and video hosting sites you will need to utilize in the distribution of your movie and/or advertising (trailers).

You can, of course, add the sharing options Vimeo gives by default, but I chose to hide those for this example.

The other main element to the page is the photo gallery.

Free HTML Template Photo Gallery Letter Eye Media

I used the FancyBox jQuery plugin for this because it goes hand-in-hand with Vimeo or Youtube videos playing efficiently and beautifully.

Free HTML Template Photo Gallery Single Letter Eye Media

I didn’t personally see War Horse, but I was really drawn to the coloring of the art, so that was the one I went with for this experiment.



All of the War Horse art is property of DreamWorks Entertainment; I had nothing to do with that part of this. This is for learning purposes and none of this art should be used for selling of anything. I am using it just to share my experience with building the functional part of the sample website.

** I did not include the videos for download in the package to keep it really lightweight, but you can replace those links with your own.

Comments ( 7 )

Leave A Comment

Your email address will not be published. Required fields are marked *