Add a video as background

[ialonso]

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! 

[kingexcel1980]

Vidtoon: You may 10X your conversions and advance your video marketing by working with a seasoned animator who has a wide range of animated spokespeople to meet your every marketing message, regardless of the niche. Additionally, we will give you your own prosperous animated video agency.
Check it here
https://www.filewasp.com/vidtoon/

[mike-ward · Accepted solution]

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!