Hi Parker
try this approach, maybe it works:
Since you’ve already uploaded the video to your server, note the file path (e.g., /path/to/your/video.mp4).
To use the HTML <video> tag, you'll need to edit the page's HTML directly. Here’s how to embed it as a background video:
- Navigate to the page where you want the background video.
- Switch to Edit mode, then add a new HTML block or open an existing HTML block if you already have one.
- Insert the following code to embed the video as a background:
<style>
.background-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
overflow: hidden;
}
</style>
<video class="background-video" autoplay loop muted playsinline>
<source src="/path/to/your/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Replace "/path/to/your/video.mp4" with the actual path of your video file.
Explanation of the Code
- autoplay: Starts the video automatically when the page loads.
- loop: Replays the video in a loop.
- muted: Ensures no sound plays by default, especially important for background videos.
- playsinline: Allows the video to play inline on mobile devices.
- CSS Styling:
- .background-video CSS class ensures the video covers the entire page.
- object-fit: cover; keeps the video properly scaled without stretching.
Fallback Image: Add a fallback background image for browsers or devices that don’t support the video tag:
<div style="background: url('/path/to/fallback-image.jpg') no-repeat center center; background-size: cover;">
<video class="background-video" autoplay loop muted playsinline>
<source src="/path/to/your/video.mp4" type="video/mp4">
</video>
</div>
Let me know if that works for you
regards
Daniel
I have same problem!