(Infinity Pro) Video Background for front-fage-1

[rikaathenaParticipant]

I really like the way Infinity Pro has the header that goes transparent when you scroll. I would like to add a simple MP4 background instead of a static image. Also, for mobile have it be a static image.

Is there a way to to do this, or if someone can point me in the direction of the files I would be editing? I don't mind if this fix removes variable codes and replaces it with a static command on the backend.

Thank you.

[rikaathenaParticipant]

Just a side note, I am wondering now how to capture the code for the header that transitions so I can apply it to other that function to other pages that I can perhaps use with a page builder.

A bit boggled with how to edit the front page to how I planned it out when I bought the theme. Thank you, again! 🙂

[braddaltonParticipant]

Link to your site please.

---

2000 + Genesis Tutorials

[rikaathenaParticipant]

Yes, thank you.

Home

I am not using the front page widgets at the moment, so looking to either change the heading manually or just move on. Ideally, having the cool fade would be a nice touch.

[braddaltonParticipant]

You can use the video widget with CSS to display it full width behind the front page 1 widget content.

---

2000 + Genesis Tutorials

[rikaathenaParticipant]

Great idea. It works, however it does an animation load and the video is set to animate along with the text. Where would I go to remove the animation on the front page?

[rikaathenaParticipant]

Also, would there be a way to make the widget take up the whole background? I have something that only takes up a small portion of the widget area right now, unlike changing the background in the front page customizer menu.

[braddaltonParticipant]

Another option is to use a plugin like one of these https://wordpress.org/plugins/tags/video-background/

---

2000 + Genesis Tutorials

[rikaathenaParticipant]

Hi Brad. Thank you so much for your help. That plugin worked! I used the page to edit my .front-page-1 container.

However now when I look at it on a mobile device or something smaller then a width of 800, my site title changes transparency (oh no!).

Is there a way around this one?

You can see it on my site if you change the window size.

[braddaltonParticipant]

You can use CSS for media queries to style any element at any width.

---

2000 + Genesis Tutorials

[rikaathenaParticipant]

I added:

.vidbg-container video {
max-width: none !important;
}

And it still gave me a weird jumping background.

I'll sing up for your site soon and bug you about it later. 😉

Thank you for your help. Ended up switching to Showcase Pro. Removes some design features I wasn't thrilled about with Infinity Pro.

[Author]

Posts