JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="video-thumbnail" data-video-id="video-1">
    <video class="video_1" id="video-1" width="100%" height="100%" controls="controls" poster="" >
        <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"/>
        <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" />
        <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg"/>
    </video>
</a>
<a href="#" class="video-thumbnail" data-video-id="video-2">
    <video class="video_2" id="video-2" width="100%" height="100%" controls="controls">
        <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"/>
        <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm"/>
        <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg"/>
    </video>
</a>
<a href="#" class="video-thumbnail" data-video-id="video-3">
    <video class="video_3"  id="video-3" width="100%" height="100%" controls="controls">
        <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"/>
        <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm"/>
        <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg"/>
    </video>
</a>

CSS

/* ::-webkit-media-controls {
  display:none !important;
} */
.blurme {
	-webkit-filter: blur(2px) grayscale(.5) opacity(0.8);
}

JavaScript

$('audio,video').bind('play', function() {
	activated = this;
	$('audio,video').each(function() {
        var clickedVideo = $(this);
        if(this != activated){ 
            this.pause();
            clickedVideo.addClass('blurme');
        }
        else {
            clickedVideo.removeClass('blurme');
        }
            
	});
});