<div class="custom__wrapper"> <video src="/media/1011/filmtegner-1.mp4" class="custom__slider" autoplay loop muted controls></video> <ul> <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li> <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li> <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li> <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li> <li onclick="videoslider('/media/1011/filmtegner-1.mp4')"><video src="/media/1011/filmtegner-1.mp4"></video></li> </ul> </div> <script> function videoslider(links) { document.querySelector(".slider").src = links; } </script> .custom__wrapper { width: 100%; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; } .custom__wrapper .custom__slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .custom__wrapper ul { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; z-index: 20; } .custom__wrapper ul li { list-style: none; cursor: pointer; margin: 10px; } .custom__wrapper ul li video { width: 200px; transition: all 0.3s; } .custom__wrapper ul li video:hover { transform: scale(1.1); } video { width: 100%; height: 100%; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter