CSS Slideshow Video Gallery

Question

Does anyone know how to make a slideshow video gallery? I've been searching for this but all I could find was slideshow image galleries. If anyone knows anything to refer to for this can you please tell me?

This is how I want to make a video gallery in CSS

Answer 1

You can use the snap scroll property of CSS to make this kind of Effect.

here are some useful links to learn.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap

https://css-tricks.com/practical-css-scroll-snapping/

or you can use : scroll-direction: horizontal;

https://css-tricks.com/pure-css-horizontal-scrolling/

Or with some tricks and animation you can achieve it like this

https://codepen.io/Schepp/pen/WNbQByE

and last part which is to use videos that is quite easy, just replace the image or text with Video tags or youtube video iframe.

That's it...

Answer 2

If you were able to make an image gallery, then you can simply change the image tags in the code <img src="file.png"/> to video tags.

For eample:
<video width="300" height="250" controls>
<source src="movie.mp4" type="video/mp4">
</video>