I noticed on Tube sites like YouTube and some cheap adult sites built on WordPress, you can mouse over a video file (post) and the image will play a video in some cases, and a slideshow preview of the video in others.

How is this possible? Every single Google Search result for Live Thumbnails gives me nothing related on how to create, or better yet, AUTO generate a moving thumbnail for my site.

Any suggestions would help, thanks.

I noticed on Tube sites like YouTube and some cheap adult sites built on WordPress, you can mouse over a video file (post) and the image will play a video in some cases, and a slideshow preview of the video in others.

How is this possible? Every single Google Search result for Live Thumbnails gives me nothing related on how to create, or better yet, AUTO generate a moving thumbnail for my site.

Any suggestions would help, thanks.

• videos

1 Answer 1

I know what tack I would take.

I would clip for a specific amount of time and scale it to the size of my desired thumbnail. The video can be auto clipped or they can be clipped manually to ensure the most interesting pieces are captured.

HTML

<div class="video">
    <video class="thevideo" loop preload="none">
        <source src="PATH/TO/FILE.mp4" type="video/mp4">
        <source src="PATH/TO/FILE.webm" type="video/webm">
        Your browser does not support the video tag.
    </video>
</div>

Javascript

 var figure = $(".video").hover( hoverVideo, hideVideo );

 function hoverVideo(e) { $('video', this).get(0).play();  }
 function hideVideo(e)  { $('video', this).get(0).pause(); }

CSS

.video {
    background-image: url('PATH/TO/FILE.jpg');
    height: HEIGHTpx;
    width: WIDTHpx;
    margin-bottom: MARGINpx;
}


video::-webkit-media-controls {
    display:none !important;  /* Hide Play button/controls on iOS */
}

Hope this helps.