First, Google must have an API that takes some frames of the video and generates a .WEBP, that is a format that just like the .GIF tb accepts animations.

See that on a system the size of Youtube probably nothing is done "on hand" is a very large scale, and most likely this API at the time of uploading the video generates this WEBP , just like the thumbnail of the video's cover. Here I am going to give you just a simple example and a basic explanation.

API Ex: The link is a multimedia framework that is capable of capturing part of a video and converting it into Gif. In Google you will find a lot of references like using FFMpeg to convert videos to Gif here has a very interesting article with this API link

  

WebP (pronounced weppy) 1 is an image format developed by   Google Inc., with the aim of reducing the size of files and   ensure a faster transfer to those who have an Internet   slow. Another advantage of this new image format is that it unites what   better in other formats such as: the possibility of compression of the   file (as it does with JPEG), the possibility of using   transparency (as in PNG), and animation support (as in GIF)

Source: link

See that by doing :hover in the thumbnail the system executes some script that adds class etc.

Thisisthelinkforthe"cover" image:

link

Seethatthe"image" that appears behind has the extension .webp This is the link of it

(this image is no longer available on youtube) link

The StackOverflow image indexer does not accept to include .WEBP image (see link)

Practical example

And here's an example with only CSS to illustrate how it can be used. But in the case of Youtube which is a GIANT platform the script works much better!

Here is just one example, it can be done in other ways ...

.wrapper {
    width: 246px;
    height: 138px;
    position: relative;
    overflow: hidden;
}
.tumb {
    height: 100%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}
.anima {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
}
.anima:hover {
    animation: animax 2.5s linear forwards;
}
.anima:hover::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255,0,0,0.5);
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;

}
@keyframes animax {
    0% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        display: none;
        opacity: 0;
    }
}

<div class="wrapper">
    <a href="https://youtube.com">
        <div class="tumb">
            <img src="https://i.ytimg.com/vi/Y3yONFHRH7c/hqdefault.jpg?sqp=-oaymwEZCPYBEIoBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLDc7UHONmH5nTT1l37OvFefWKYVNA"alt="">
        </div>
        <div class="anima">
<!-- a imagem original o youtube removeu -->
            <img src="https://thumbs.gfycat.com/ImpassionedWanAltiplanochinchillamouse-size_restricted.gif"alt="">
        </div>
    </a>
</div>