UABB’s Sticky Video feature allows sticking the video on page scroll. Your video will float along the left or right side of the browser window. So, as the reader scrolls the content both the video and your marketing messages will stay in focus.
To make the video sticky, enable it from Sticky Video tab.
For sticky video feature you get different alignments options for the video, Call to Action Bar and settings to control every part of the sticky video. Below are the key features –
- Different alignments for sticky video across the edges
- Add a background for the video and manage its spacing and style
- Info bar to display the description for the video
- Responsive support
- Close button customizations
- Drag sticky video across the window in the frontend
Specify the width of the Video in px. The video height and width will apply as per the Aspect Ratio set for the video. The aspect ratio for video can change from General > Video > Aspect Ratio.
For example – If 16:9 ratio is set for video then the sticky video width and height will apply as per the selected ratio.
STICKY ALIGNMENT & SPACING
Sticky Alignment: Manage the position of the sticky video across the edges of the window. Below are the available positions –
- Top Left
- Top Right
- Bottom Left
- Bottom Right
- Center Left
- Center Right
Spacing from Edges: You can manage the spacing around the video. This spacing will apply from the edges of the screen.
Note: Spacing will depend on Sticky Alignment selected.
For example – For Top Left alignment, only spacing will apply from the top and left edges of the video.
BACKGROUND SIZE & STYLE
You can add the background to the sticky video. Background size and color option will be available.
MANAGE STICKY VIDEO ON RESPONSIVE DEVICES
Under Sticky Video section, you get an option to Hide the Sticky Video on responsive devices. Here, you can select multiple devices on which you want to hide the sticky video.
You can Enable/Disable the close button for the sticky video. Controls to manage the style of the close button are available.
This option allows adding informative text under the sticky video. Here, you can display the description of the sticky video which provides information about the video currently playing on the page.
You can manage the color, background color, typography and padding to the Info bar.
The text field supports the HTML content so, you can apply the custom style to the Info Bar content.
The sticky video can be dragged anywhere on the screen using this feature.
You can move the sticky video anywhere within the viewport by clicking and dragging it. The sticky video supports the draggable functionality by default.
Note: The drag functionality do not work in the backend editor of the Beaver Builder and on Mobile devices.