Solved

MP4 Hero image

Forum|Forum|1 year ago
January 27, 2025
3 replies
727 views

Hello,

I am attempting to reformat a website to appear analogous to an older version of the site hosted on Wix. There, the site has a short, 10 second MP4 that plays behind some text. I believe I can accomplish the text overlay, but placing in the MP4 on the site as a Hero Image is proving to be a challenge. The file and link paths are all correct, but it will not appear. Is there another way to accomplish this?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Ravi_Pampana

Consider using a fallback image in case the video doesn't load for some users. You can provide an image background as a backup if the video is not supported or fails to load.

<div class="hero-video-container" style="background-image: url('/path/to/your/fallback-image.jpg');">
    <video autoplay loop muted playsinline class="hero-video">
        <source src="/path/to/your/video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <div class="hero-text-overlay">
        <h1>Your Text Here</h1>
    </div>
</div>

CSS:

.hero-video-container {
    position: relative;
    width: 100%;
    height: 100vh; /* or adjust to your preferred height */
    overflow: hidden;
}
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures video covers the entire container */
}
.hero-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 3rem; /* Adjust size as necessary */
    text-align: center;
}

Shiv_Prakash_Patel

Community Advisor

Hi @ijmarti

To set an MP4 as a hero background, wrap it in a <video> tag with autoplay, muted, and loop attributes, ensure correct file paths, and use CSS to position it.

Example of HTML & CSS

<div class="hero-container">
    <video autoplay muted loop class="hero-video">
        <source src="your-video.mp4" type="video/mp4">
    </video>
    <div class="hero-text">Your Text Here</div>
</div>

.hero-container { position: relative; width: 100%; height: 100vh; }
.hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; }

Check the video file format and ensure browser compatibility (MP4 with H.264 codec).

Regards

Shiv Prakash

Ravi_Pampana

Accepted solution

Community Advisor

Consider using a fallback image in case the video doesn't load for some users. You can provide an image background as a backup if the video is not supported or fails to load.

<div class="hero-video-container" style="background-image: url('/path/to/your/fallback-image.jpg');">
    <video autoplay loop muted playsinline class="hero-video">
        <source src="/path/to/your/video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <div class="hero-text-overlay">
        <h1>Your Text Here</h1>
    </div>
</div>

CSS:

.hero-video-container {
    position: relative;
    width: 100%;
    height: 100vh; /* or adjust to your preferred height */
    overflow: hidden;
}
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures video covers the entire container */
}
.hero-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 3rem; /* Adjust size as necessary */
    text-align: center;
}

kautuk_sahni

Community Manager

@ijmarti Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

Kautuk Sahni

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded