In this scroller you can show trailers of videos as examples for customers. When you scroll down, the video you have been looking at gets stopped, and the next one starts playing.The videos have been added using the 'HTML 5 video' element. However, the scroller does not work well on mobile devices.
To change the size of the display window you edit the width of the .video-wrapper and the height of the .vids in the style sheet scroller-styles.css. The aspect ratio of the actual video file can be set in the js at the bottom of the HTML file where it now says 10 / 16. It may take a bit of fiddling to get all the proportions right.
The scroller may also be used for displaying other things, like text, images, most things actually. In those cases you won't necessarily need the little script found at the bottom of this page (in code view). The script is there to manage the shifting of the videos.
In this scroller you can show trailers of videos as examples for customers. When you scroll down, the video you have been looking at gets stopped, and the next one starts playing.The videos have been added using the 'HTML 5 video' element. However, the scroller does not work well on mobile devices.
To change the size of the display window you edit the width of the .video-wrapper and the height of the .vids in the style sheet scroller-styles.css. The aspect ratio of the actual video file can be set in the js at the bottom of the HTML file where it now says 10 / 16. It may take a bit of fiddling to get all the proportions right.
The scroller may also be used for displaying other things, like text, images, most things actually. In those cases you won't necessarily need the little script found at the bottom of this page (in code view). The script is there to manage the shifting of the videos.
The videos used here are from Pexels.
Download the component.