This is a message.

Initial splash image

How to install a splash image for your videos

standalone demo

Click on the splash image above to see how this technique works.


There are several benefits when using this technique:

  • Your pages load faster. Flash components require some processing power from your computer when they are being initialized. Images are much faster - browsers are highly optimized for displaying them.
  • In place of the video you can supply content that search engines understand. A convenient way is to supply this in the IMG tag's alt attribute.
  • You can install an infinite number of players on a page without any loss of performance. Take a look at the next demo for installing multiple players on a page.
  • You can visualize your videos with high quality images before they are viewed.

If you have lots of videos you can use FFMPEG to grab images from your video file without the hassle of making a doing all that work manually.

The player container

This setup is identical to the minimal setup with one important exception. There is HTML placed inside the container as follows:

<!-- set up things like in the minimal setup  -->
<!-- player container-->
<a href="" class="player"
style="display:block;width:425px;height:300px;margin:10px auto"
<!-- specify a splash image inside the container -->
alt="Search engine friendly content" />


This technique is called a "splash image". This is a bit misleading because you can place any HTML inside the container - not just an IMG tag. You can also use a background-image CSS property for the container. This gives you powerful skinning possibilities as shown in these skinning demos.