Blog, Website & Page Publishing

ialonso
Participant

Add a video as background

SOLVE

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! 

0 Upvotes
1 Accepted solution
mike-ward
Solution
Key Advisor

Add a video as background

SOLVE

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!

View solution in original post

0 Upvotes
1 Reply 1
mike-ward
Solution
Key Advisor

Add a video as background

SOLVE

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!

0 Upvotes