# Add a video as background

**URL:** <https://community.hubspot.com/t/add-a-video-as-background/48757>\
**Category:** Blog, Website & Page Publishing\
**Tags:** professional\
**Created:** [December 17, 2021, 6:02pm UTC](https://community.hubspot.com/t/add-a-video-as-background/48757 "2021-12-17T18:02:56Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ialonso](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ialonso/32/27089_2.png) [@ialonso](https://community.hubspot.com/u/ialonso)\
**Post date:** [December 17, 2021, 6:02pm UTC](https://community.hubspot.com/t/add-a-video-as-background/48757/1 "2021-12-17T18:02:56Z")

</div>

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](https://www.shakersworks.com/home-0?hs_preview=EsVptJxO-62150780810)

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!

---

<div class="post-metadata">

**Author:** ![mike-ward](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mike-ward/32/26595_2.png) [@mike-ward](https://community.hubspot.com/u/mike-ward)\
**Post date:** [December 19, 2021, 12:53pm UTC](https://community.hubspot.com/t/add-a-video-as-background/48757/2 "2021-12-19T12:53:40Z")

</div>

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](https://blog.hubspot.com/website/video-background-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!_