Skip to content

Elements:Video Blocks

Grab attention with these stunning video background blocks.

Setup

Add background video to any div by adding an data-bg-video="PATH-TO-VIDEO" attribute to a div element. You can pass optional settings via a data-settings='{JS-OBJECT}' attribute as well.


Examples

Video Background Rule!

wow wow wow this is nice!

Video Background Rule!

Video Background Rule!

Get Bubbles!

Options

Options can be passed by adding a data-settings="{OBJECT}" attribute.
Example: data-settings='{"position":"50% 50%", "autoplay":false}'


volume

Default: 1

Video volume setting.


playbackRate

Default: 1

Video playback rate/speed.


muted

Default: true

Whether the video should be muted.


loop

Default: true

Whether the video should loop.


autplay

Default: true

Whether the video should autoplay on load.


muted

Default: '50% 50%'

Position the video, similar to the CSS background-position property.


posterType

Default: 'detect'

Poster image type. "detect" - auto-detection; "none" - no poster; "jpg", "png", "gif",... - extensions.


resizing

Default: true

Autoresize video to fit.


bgColor

Default: 'transparent'

Set the background colour behind the video.

Awesome Features

99.9% Uptime Free Upgrades Fully Responsive Bug Free

Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page