Adding a background video can enhance the visual appeal of your website and make it more engaging. Follow these steps to add and edit background videos in Elementor:
Step 1: Open the Elementor Editor
- Log in to your WordPress dashboard.
- Navigate to the page or post you want to edit.
- Click Edit with Elementor to launch the Elementor editor.
Step 2: Add a Section
- In the Elementor editor, click the Plus (+) icon to create a new section or select an existing section you want to edit.
- Choose the desired structure (e.g., one column, two columns).
Step 3: Add a Background Video
- Navigate to the Style tab in the Settings Panel.
- Under Background, select Background Type and click on the Video option (a play button icon).
- Paste the URL of your video:
- YouTube or Vimeo: Paste the URL directly.
- Self-Hosted Video: Click the Media Library icon to upload or select a video from your WordPress Media Library.
Step 4: Customize Video Settings
- Start Time and End Time: Define when the video should start and stop (optional).
- Play Once: Toggle this option if you want the video to play only once instead of looping.
- Background Fallback: Upload a fallback image for browsers that don’t support background videos.
- Overlay: Enable and customize an overlay (e.g., a color or gradient) to enhance visibility of text or other content.
Step 5: Adjust Responsive Settings
- To ensure the video displays correctly across devices:
- Open the Advanced tab and adjust margins or padding as needed.
- Use the Responsive Mode to preview how the section looks on desktop, tablet, and mobile.
- For mobile devices, consider replacing the video with a static background image for performance.
Step 6: Save Changes
- Click the Publish button at the bottom to save your changes.
- Preview your page to ensure the background video appears and functions as intended.
Notes
- Ensure the video is muted and looped if it’s being used as a background to comply with user experience best practices.
- Use lightweight videos to avoid slow page load times.
For more information, please watch the video.
