MP4 Hero image | Community
Skip to main content
January 27, 2025
Solved

MP4 Hero image

  • 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; }

3 replies

Shiv_Prakash_Patel
Community Advisor
Community Advisor
January 27, 2025

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
Community Advisor
Ravi_PampanaCommunity AdvisorAccepted solution
Community Advisor
January 27, 2025

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
Community Manager
January 29, 2025

@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