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. A 'poster' picture has been made from each video to cover the look of the bare video player before start. 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. The aspect ratio of the actual video file can be set in the js on the Element pane, on line 9. 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 that is sitting on the Element pane. The script is there to manage the shifting of the videos.
A useful hint: Try not to come near the scrollbar next to the videos while working in Site Designer. It has a tendency to 'follow you around' and will drop just anywhere on the canvas if you click with the mouse. If that happens, 'undo' your steps (Ctrl+Z), and the video will go back into its spot. It is safe to touch that scrollbar in preview.
The videos used in this component come from Pexels.
Video Scroller
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. A 'poster' picture has been made from each video to cover the look of the bare video player before start. 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. The aspect ratio of the actual video file can be set in the js on the Element pane, on line 9. 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 that is sitting on the Element pane. The script is there to manage the shifting of the videos.
A useful hint: Try not to come near the scrollbar next to the videos while working in Site Designer. It has a tendency to 'follow you around' and will drop just anywhere on the canvas if you click with the mouse. If that happens, 'undo' your steps (Ctrl+Z), and the video will go back into its spot. It is safe to touch that scrollbar in preview.
The videos used in this component come from Pexels.
Download this component