Elements – Video Backgrounds

[vc_row full_width=”stretch_row”][vc_column][stack_hero image=”38″][vc_column_text]

Video Backgrounds

These modular elements can be readily used and customized across pages and in different blocks.


Explore all of Stack’s modular elements
at the Element Index Page →[/vc_column_text][/stack_hero][/vc_column][/vc_row][vc_section][vc_row css=”.vc_custom_1485825445121{margin-bottom: 30px !important;}”][vc_column][stack_boxed_content padding=”boxed–lg” background=”bg–secondary”][vc_column_text]

Local Video Background

This section uses local video files hosted on your own server, required in WEBM, MP4 and OGV formats using the HTML video element. Place the class .videobg and .imagebg on the section as described below.

NOTE: The video background element does not display on mobile devices, for these devices, a fallback poster image is used.[/vc_column_text][/stack_boxed_content][/vc_column][/vc_row][/vc_section][vc_row full_width=”stretch_row”][vc_column][stack_hero_video image=”235″ webm=”http://stack.tommusdemos.wpengine.com/wp-content/uploads/sites/62/2017/01/video.webm” mpfour=”http://stack.tommusdemos.wpengine.com/wp-content/uploads/sites/62/2017/01/video.mp4″][vc_column_text]

Here’s a local video being used as a background

[/vc_column_text][/stack_hero_video][/vc_column][/vc_row][vc_section][vc_row css=”.vc_custom_1485825445121{margin-bottom: 30px !important;}”][vc_column][stack_boxed_content padding=”boxed–lg” background=”bg–secondary”][vc_column_text]

Youtube Video Background

This section uses a video hosted on Youtube. The Youtube background sections requires a div with class .youtube-background with the data attribute data-video-url which is the Youtube video’s ID.

Alternative, add the data-start-at attribute with a numerical value to start the video playing from a particular point ie. a value of 10 would start the video 10 seconds in.

Place the class .videobg and .imagebg on the section as described below.

NOTE: The Youtube video background element does not display on mobile devices, for these devices, a fallback poster image is used.[/vc_column_text][/stack_boxed_content][/vc_column][/vc_row][/vc_section][vc_row full_width=”stretch_row”][vc_column][stack_hero_video layout=”youtube” image=”235″ embed=”M-hGwtvtXCk” start=”17″][vc_column_text]

Here’s a YouTube video being used as a background

[/vc_column_text][/stack_hero_video][/vc_column][/vc_row]