JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div>
    <video loop="" autoplay="" muted="">
					<source src="https://player.vimeo.com/external/383996077.hd.mp4?s=9bbb8f42ac7fc5268c063deec4d471c3ce2cac97&amp;profile_id=174" type="">
				</video>
</div>

CSS

body {
    overflow: hidden;
}
div {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    overflow: hidden;
    transition: cubic-bezier(0.75, 0.03, 0.16, 0.99) 1s;
    transform: translate(-90%,0);
    border-radius: 50px;
}
div.active {
    transform: translate(0%,0);
}
video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    transition: cubic-bezier(0.75, 0.03, 0.16, 0.99) 1s;
    transform: translate(50%,0);
}
div.active video {
    transform: translate(0%,0);
}

JavaScript

$('div').click(function(){
	$(this).toggleClass('active')
})