Wix Editor: Using Video Backgrounds on Your Mobile Site
2 min read
Make your mobile-friendly site lively and dynamic with a video background. Add a video background to your pages and enable video background for various elements like Strips, Columns, Lightboxes and more.
Tip:
Your mobile background can be different to your desktop background. Changing one of them does not affect the other.
Learn how to:
Adding Video Background to a Page
Add a video to the background of your mobile pages. You can use professional videos made by Wix for free, purchase a video from Shutterstock or upload a video of your own.
To add a video background to a page on mobile:
- Click the relevant page in your mobile Editor.
- Click Background on the left of the mobile Editor.
- Click Video.
- Select a video in the Media Manager.
- Click Change Background.
- (Optional) Click Apply to Other Pages at the bottom to add this background to other pages of your mobile site.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/12345678-1234-1234-1234-1234567890ab/2020/09/09/0328e615-ee75-4294-b22c-655690cf5354/6619dba4-220c-4445-9d30-ef85d4b607ed.gif)
Enabling Video Backgrounds on Elements
By default, video backgrounds on elements do not play on mobile devices. However, if you add a video background to the following elements on desktop, you can change the setting to allow it to play on mobile as well:
- Strips
- Columns
- Hover Boxes
- Lightboxes
- Slideshows
To allow videos backgrounds to play on mobile:
- Access the mobile Editor.
- Click the relevant element (one from the list above).
- Click the Background icon
.
- Click the Play video on mobile toggle:
- Enabled: The video background of the element plays automatically on mobile devices.
- Disabled: When disabled, the first frame of the video is displayed.
- (Optional) Add spacing to the top or bottom of your background. Drag the slider to set the spacing in pixels.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2020/11/24/965ad311-f020-47e7-b063-0493ee6ddcce/7060037e-1ddb-4a8f-9527-e8899fd7103c.png)
Note:
If Data Saver is enabled in your Chrome settings on your mobile device, or if low-power mode is enabled on your iOS device, the system / browser prevents videos from playing automatically.
Did this help?
|