Video Background

To place a video background in different locations on desktop and mobile, you can use a CSS selector for each device directly from the app's preferences page. For new videos, simply select the page and video type, and specify the target element. For existing videos, adjust the location via the Settings icon. You can also select options like placing the video after, before, or as the first or last child of a selected element.

Yes, you can add as many videos as you like to different pages, but you cannot place multiple videos in the same spot. You can easily switch videos in the app preferences without changing other settings. However, adding several large videos on one page may affect performance, so we recommend limiting that. Manage videos through the app preferences, selecting the type, page, and position for each video.

The app focuses on background videos, so it does not include advanced player controls like progress bars or video quality adjustments that you might find on platforms like YouTube or Vimeo. However, it does offer basic control options, such as play/pause and mute/sound buttons, which can be easily enabled from the app's preferences under the 'Settings' section. On the Video Preferences page, you can configure these buttons to give customers some control over the video experience without overwhelming them with too many options.

The Video Background app only works with YouTube, Vimeo, and TikTok videos due to their superior streaming capabilities and their ease to upload and manage videos within minutes and even with mobile devices. Shopify’s platform does not support video streaming, so uploading videos directly can slow down performance.

Yes! The gradient effect is added to temporarily hide YouTube’s controls (channel icon, logo, and title) in the first few seconds. If you prefer to remove it, follow these steps:

1. Go to the app’s preference page → Configured videos.
   
2. Select the settings icon (Video camera icon) for your video.
   
3. Scroll to Advanced options → Gradient Colour.
   
4. Select 'None' to disable the effect.
   

This will remove the gradient and keep the original video display.

• Regular URL: https://www.youtube.com/watch?v=hFVa3xykqiE
  
• Embedded URL: http://youtu.be/hFVa3xykqiE
  
• Enter the URL in the Video URL field under Settings in the video list. If the video plays automatically, the URL is valid. Otherwise, check for errors.
  

To change the image displayed while the video is loading, update the video thumbnail in YouTube or Vimeo.

• YouTube: Go to YouTube Studio → Select your video → Edit → Choose or upload a custom thumbnail.
  
• Vimeo: Open your video in Vimeo → Select "Thumbnail" → Upload or choose a frame.
  

Using the first frame of the video helps maintain visual consistency.

There is no fixed size, as the Video Background adapts to the section where it is placed. However, choosing the right aspect ratio helps:

• Wide & short videos work best for headers.
• The 16:9 ratio is ideal for image sliders, featured sections, and full-page backgrounds.
• On mobile: If the video overflows or gets cropped, you can adjust the section size, upload a mobile-friendly version, or use a responsive video setup.
  

The Video Link feature allows you to add a clickable link to your videos, directing customers to a YouTube/Vimeo channel, product page, or any other website when clicked. Available for Element Replacement Video and Responsive Content Video, you can set it up in the Video Preferences section by pasting your link and choosing whether it opens in the same tab or a new tab.

If your video doesn't autoplay on mobile, it’s likely due to low-power mode or low battery, as mobile devices disable autoplay to conserve energy. This is a system restriction that cannot be overridden. To fix this, disable low-power mode, ensure your battery level is sufficient, or enable the Play button in the app preferences for manual playback. For more details, check this guide or, for iOS devices, Apple’s support page.