Add Video to Header Background

Good Morning,

I’m trying to add a video to the header background similar to this https://www.garyvaynerchuk.com/

can you give me some help doing this? I don’t understand much with video source and all that, and am having trouble. Any help would be appreciated.

Hi There,

SO you are looking to have a button that plays the video in a popup/lightbox?

Or you would like to have a background video and your header do lay over it?

Please let us know

Thanks

either one works honestly. Whatever is easier for me to implement into my site. Thank you

I’m currently using the “hero” header template, and want the video to be able play in that large area when clicked. thanks

Hi There,

Please follow this article https://theme.co/apex/forum/t/pro-using-partials/213 and watch the The “Background” Partial video.

If you really need a video lightbox like what you have shown on the example site, then you need an image (to represent as play button), the video’s direct URL (or if the video is from Youtube like your example) you need the videos source link (https://prnt.sc/gedp1f). And most importantly the lightbox shortcode.

To do this:
First add your Image on your header, make that image a Link and put the video source link on the URL field.

screenshot

Also assign a class to your Image as we are going to use this class as an identifier (selector) on your lightbox shortcode.

Then formulate your lightbox shortcode, use the CLASS you assigned on the image as the selector and paste it on a Text element, it does not matter where you place the text element, it wont show on the front-end anyway, better if you place it below the image so you can easily identify and locate it in the future.

And thats it.

Hope it helps,
Cheers!

1 Like

thank you so much for all the help. You are the best!!!

ok i thought i got it. I seem to be having trouble bc I want the image where the video plays to take up the whole container

I added the link to the image but what am i missing to fill up that entire container? sorry i’m still learning hopefully this isn’t a confusing question

https://www.dropbox.com/s/qovn93whizun4uq/theme.png?dl=0 (here is what my screen looks like)

Hi There,

Lightbox does not supposed to be full-width, even on the example site you provided the lightbox is not full-width, so that is normal. Sorry I’m confused I visit your site and see 2 play buttons, both are linked to a video post and not on a lightbox. Please clarify.

Thanks,

sorry for the delayed response. I think i kind of asked a confusing question above adding a video background to my header in X pro.

Anyway. I want to have my header look something like this https://www.katyhearnfit.com/

I am having trouble bc i don’t know what to put in the video source tab? i have a vimeo pro and youtube account so i just need help figuring this out.

This is what my header looks like

Hello There,

Thank you for the clarifications. The video source should be added in the bar element. You mentioned Video or Youtube, please understand that you will need to insert the direct video file path http://example.com/video.mp4 and not just a vimeo or youtube url. The most accepted video file is .mp4, .webm or .ogv. Other formats will not work and won’t display any video at all.

Hope this helps.