• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

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

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › (Infinity Pro) Video Background for front-fage-1

This topic is: resolved

Tagged: Infinity Pro, video background

  • This topic has 10 replies, 2 voices, and was last updated 4 years, 9 months ago by rikaathena.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 5, 2019 at 1:28 pm #489309
    rikaathena
    Member

    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.

    February 5, 2019 at 1:46 pm #489310
    rikaathena
    Member

    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! 🙂

    February 5, 2019 at 8:46 pm #489327
    Brad Dalton
    Participant

    Link to your site please.


    Tutorials for StudioPress Themes.

    February 7, 2019 at 6:06 pm #489413
    rikaathena
    Member

    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.

    February 7, 2019 at 10:41 pm #489418
    Brad Dalton
    Participant

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


    Tutorials for StudioPress Themes.

    February 8, 2019 at 5:49 pm #489429
    rikaathena
    Member

    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?

    February 8, 2019 at 6:08 pm #489430
    rikaathena
    Member

    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.

    February 9, 2019 at 2:30 am #489435
    Brad Dalton
    Participant

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


    Tutorials for StudioPress Themes.

    February 9, 2019 at 8:40 pm #489457
    rikaathena
    Member

    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.

    February 10, 2019 at 1:40 am #489459
    Brad Dalton
    Participant

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


    Tutorials for StudioPress Themes.

    February 11, 2019 at 1:45 pm #489492
    rikaathena
    Member

    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
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘(Infinity Pro) Video Background for front-fage-1’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble