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.
This topic was automatically closed after 70 days. New replies are no longer allowed.