How to customise the embedded Vimeo preview

Videos embedded from Vimeo display a lot of visual clutter before playing. You can replace it with a custom preview box. See the ‘before’ and ‘after’:

To do so, refer to your videos with link tags such as this:

<a class="vimeo" href="https://vimeo.com/120903978" data-color="df5a3f">
    <!-- custom preview HTML goes here -->
</a>

Replace the Vimeo URL so that it ends with your video’s numeric identifier. You may also want to use a different class name (be sure to replace it everywhere), and choose a custom control colour. At the bottom of the HTML code, add:

<script src="struzan.js"></script>
<script>struzan('.vimeo');</script>

Make sure the first script refers to a copy of struzan.js on your web server. If you have customised the class name in HTML, also change the selector in the struzan() call. Finally, add some CSS code to style your video box, such as:

.vimeo { display: inline-block; width: 680px; height: 382px; }
.vimeo.loading { outline: 2px dotted; }

The struzan.js script adds the video thumbnail as a background image to the <a> element. When the visitor clicks it, the Vimeo iframe starts loading and the <a> element gets an additional ‘loading’ class name. When the iframe is loaded, the <a> element is fully replaced.