MP4 Hero image

[ijmarti]

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?

[Shiv_Prakash_Patel]

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

[Ravi_Pampana · Accepted solution]

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]

@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!