How to add a video stack background?

It'll only take a few easy steps to add a video stack background from your Rocketspark dashboard page Editor.

Step.1 Download your Video 

Step.2 Add the Video to your Rocketspark website

Video Stack Background FAQ

Step.1: Download your video

You need to upload the video to your YouTube or Vimeo account first to be able to add the video as a stack background on your website. If you don't have a YouTube or Vimeo account, follow this help guide to create one.

If you are using YouTube:

• To get the share link from YouTube, click the SHARE icon below the video and click COPY to copy the link of the video from the pop-up.
  
  

If you are using Vimeo:

• To get the share link from Vimeo, you can click on the Share dropdown above the video and choose Copy video link.
  
  
  
  You can now set an image as a placeholder for your video, to show just before the video in the stack background starts playing. To add a placeholder image to a video stack background:
• Simply add a thumbnail image to your stack background video, in Vimeo, and your video will no longer preview a black screen just before it starts auto-playing. Instead, you’ll see your chosen thumbnail (or placeholder image).
• In Vimeo Privacy settings, make sure your video is set to 'Public'.

Step.2: Add the Video to your Rocketspark website

1. Log into your dashboard and go to Editor.
   
   
2. Navigate to the stack you want to add a background for. Hover your mouse over the stack and you'll see a menu coming out from the right end of the screen. Click on the color wheel in the menu to edit the design of this stack.
   
   
   
   
   
3. Click open Stack Background in Stack-specific Design Options or hit the pencil icon the top left-hand corner and move the slider to Video.
   
   
4. In the Video URL field, paste the share link of the video you just retrieved from YouTube or Vimeo. You'll see the video is added as a stack background.
   
5. Click open the Video position selector and choose whether you want to show the Top/Middle/Bottom part of the video in the background of the stack.
   
   
6. The height of the video will equal the height of the stack. To adjust the height of the video background, go to Width & Spacing under Stack-specific Design Options and drag the slider to increase top and bottom Stack Spacing.
   

Video Stack Background FAQ

How does Video Stack Background respond to mobile?

• When there is no content in the stack, a fixed height will be set for the stack and the fixed height will allow the video background to be full width and the entire video will show on mobile.

Note: If the video displays as a thin strip on mobile and you want to increase its height without adding content, one technique you can try is to go to the desktop page Editor, add a text block in the stack, and add some spacing (by hitting the spacebar on keyboard) in the text block.

• If there's content in the stack, the height of the video stack background will increase and so only the center part of the video will show on the mobile screen with the rest of the video chopped off. The background will just wrap the content so that when the content's width or height changes (e.g., when the content in different columns wraps), the video background on mobile will adjust accordingly to cover the whole stack. See how mobile responsiveness works on Rocketspark.

Note: It's not recommended to have long content or too many columns in a stack when using Video Stack Background otherwise you might get pixelated video background on mobile when the height needs to increase a lot to cover the wrapped content in the stack. 

Can I have sound on for my video background?

If you need to play a video on your website with sound on (e.g., for a customer interview), Video Block will be a better option. 

Can I have a Video Feature Area?

Refer to the last section in the help guide here: Editing the Feature Area. 

Are there guidelines for optimal video size/length?