Hey, how do I make a video play in the background of my webpage, its a video of a mountain with clouds and I want to put text ontop of it so it looks cool, but I can’t figure out how to have a video autoplay without either the youtube Ui there or to click to start the video.
It should look like that
Hello!
In this case, I think using a GIF would be more appropriate (following standard optimization and user experience rules, although, on second thought, a GIF usually has terrible quality for some device formats). However, if you want to display a video like on the example site you provided, you can do so by adding HTML to the background of your page.
<video autoplay="" width="100%" muted="" loop="" class="pointer-events-none z-0 h-full w-full object-cover object-top">
<source src="https://videos.pexels.com/video-files/2888383/2888383-hd_1280_720_24fps.mp4" type="video/mp4">
</video>
This will add a looping and muted video without visible controls, creating an experience like this:
To do this, I created a group with “center align to parent” using these settings:
Then, inside this group, I added the HTML provided above. I configured this HTML as follows:
These settings should give you a responsive design:
Then, you can add another group inside this same group to add the title and anything else you want to include.