Add a video as background

Marketing & Content Hub Blog, Website & Page Publishing
1

Hello,

I want to show a 2-3 seconds video and later cover it with 2 cards that will set the action.

These cards have an animation triggered after the video has shown everything it needs to show.

Currently, I am using a GIF, as it’s the only I can put it in the background, does anybody know how I could put a video instead?

Here is the example of what I’ve built so far with the GIF

Also, would it be possible to change the video for mobile with a smart rule or something? So it shows a vertical video on a mobile device?

Thanks a lot!

2

Hi @ialonso ,

There are some background video modules available (see these video modules in the marketplace).

However, personally I’d make my own custom Module for this. Basically, it can just be a kind of VideoContainer - you can expose a couple of fields (like embed codes, for different sizes) and display the videos either with a <video> tag, or an <iframe> if you want to use a third-party embed from YouTube. Note that you can’t use video sources like you can for images, so if you want a different video for mobile devices, you may have to use a little JavaScript to handle dynamically determining the video file to use .

The code is fairly simple all-told - here’s an example of the kind of thing from the HubSpot blog on How to Create a Video Background with CSS.

Cheers,

Mike

---
Did I answer your question? If your question is answered, please mark it as a solution. If you need more help, hit that big orange ‘Reply’ button!