# VTT Preview Thumbnails

Mouse over progressbar to see the time thumbnails once video started to play.

## Tutorial

To use VTT based thumnails plugin you must load it first, right after video.js script, for example:

    <link href="../skins/nuevo/videojs.min.css" rel="stylesheet" type="text/css" />
    <script src="../video.min.js"></script>
    <script src="../nuevo.js"></script>
    <script src="../plugins/videojs.thumbnails.min.js"></script>

Initialize videojs player with nuevo and thumbnails plugin. Provide vtt URL for thumbnails src option.

    <script>
    var player = videojs("player_1");
    player.nuevo({ option1: "value1", option2: "value2" })
    player.thumbnails({src:"../examples/assets/vtt/demo.vtt"});
    </script>

Thumbs over progress bar can be responsive. This means that it can be of different size, depending on the player's width.
On Nuevodevel demo website page we describe how to apply thumb's responsivity and what are possible settings for such option.
To learn what are thumbnails images or thumbnails single sprite image, and to learn what VTT file structure should be, please visit VTT Thumbnails dedicated resource. If you login on Nuevodevel website you will also gain access to download bash sprite/vtt generator free script.