• 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

Fullscreen Video instead of Background Image

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 › Fullscreen Video instead of Background Image

This topic is: not resolved

Tagged: Altitude Pro, Background Video, fullscreen video, widget background

  • This topic has 17 replies, 2 voices, and was last updated 8 years, 3 months ago by PainterMommy.
Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • October 27, 2017 at 8:07 am #213011
    PainterMommy
    Member

    I am working on a site http://www.twostoriesmedia.com/site/ (Altitude Pro Theme) and the client wants to have a video playing in the background at the top of their site in place of the background image, similar to the examples below...

    Homepage


    http://motionstatemedia.com/

    Index Page

    Is there an easy way to accomplish this? I am a novice when it comes to coding.

    DAWN

    http://www.twostoriesmedia.com/site/
    October 27, 2017 at 8:19 am #213013
    Brad Dalton
    Participant

    Dawn

    Here's a tutorial which provides the code.

    I am a novice when it comes to coding.

    Studiopress do not provide a free custom coding service so you need to either :

    Learn coding or Hire a Developer


    Tutorials for StudioPress Themes.

    October 27, 2017 at 9:14 am #213017
    PainterMommy
    Member

    Hi Brad. Thanks so much. I signed up for your site and paid. I followed the instructions and FTP'd the new front-page.php and style.css and now the site is completely broken. Can you tell me what I did wrong? I even tried to go back to the original files and still the site was left broken. I am in tears right now. I worked for days on this site. I so appreciate any help that you might have for me.

    DAWN

    October 27, 2017 at 9:16 am #213018
    Brad Dalton
    Participant

    Please send me your FTP details


    Tutorials for StudioPress Themes.

    October 27, 2017 at 9:22 am #213019
    PainterMommy
    Member
    This reply has been marked as private.
    October 27, 2017 at 9:23 am #213020
    PainterMommy
    Member
    This reply has been marked as private.
    October 27, 2017 at 9:26 am #213021
    Brad Dalton
    Participant

    Please send me FTP hostname, username and password using this email [email protected]


    Tutorials for StudioPress Themes.

    October 27, 2017 at 9:33 am #213022
    PainterMommy
    Member

    OK, I just emailed you with everything. Thankyou!!

    October 27, 2017 at 9:42 am #213023
    Brad Dalton
    Participant

    THe site is NOT broken. You need to follow the installation instructions and copy the CSS to the end of your style.css file. Looks like you uploaded the style.css file which only works for fresh unmodified copies of the theme.


    Tutorials for StudioPress Themes.

    October 29, 2017 at 1:43 pm #213014
    PainterMommy
    Member

    The example site links didn't come out correctly above. Sorry about that.

    https://condit.com/
    http://motionstatemedia.com/
    http://whitelinecreative.com/

    November 2, 2017 at 11:02 am #213194
    PainterMommy
    Member

    The video and header area is working great when viewing on a computer, but everything is very off when viewing from a mobile device such as a smartphone or tablet. Any suggestions on how I can get the video to show properly on mobile devices? How can I add more space so that the video is not cut off and push the menu bar down below the video? Ideally, I would like the logo at the top, then the video, and then the menu bar below that.

    November 13, 2017 at 3:43 pm #213534
    PainterMommy
    Member

    Hi, I never heard back from anyone. The video looks AWESOME on a laptop, but looks terrible from a mobile device. The video is cut off and the menu bar is on top of everything. How can I get it to look right? I am assuming in the media queries, but I have no idea what code to adjust. I appreciate any help that you might have for me.

    DAWN

    November 14, 2017 at 3:29 pm #213561
    Brad Dalton
    Participant

    If you watch the video, it works perfectly on all screen widths.

    However, if you added different content to the front page 1 widget area or modified the code in anyway, you may need to modify the CSS for media queries so they work with your customizations.


    Tutorials for StudioPress Themes.

    November 14, 2017 at 3:42 pm #213562
    PainterMommy
    Member

    I just followed your tutorial instructions. I didn't add anything custom. What do I need to modify to get it to look right? Any ideas?

    November 14, 2017 at 3:45 pm #213563
    Brad Dalton
    Participant

    Link to the site please.


    Tutorials for StudioPress Themes.

    November 14, 2017 at 3:51 pm #213564
    PainterMommy
    Member

    Sure, no problem! http://www.twostoriesmedia.com/site/

    November 14, 2017 at 4:13 pm #213565
    Brad Dalton
    Participant

    You need to modify the CSS for media queries so the widget content displays on smaller screens and also use the other menu. You can't use the header menu with this solution. Then you'll get the same result as whats in the demo video.


    Tutorials for StudioPress Themes.

    November 17, 2017 at 10:11 am #213676
    PainterMommy
    Member

    Thankyou! I went ahead and changed to the other menu, but now the logo is being pushed down below the menu when viewing from my laptop. And the menu is not opening at all on a mobile device. Any ideas?

    And what exactly would I modify in the CSS for the media queries? Is there a specific code I need to add or adjust?

    The site looks better from a mobile now, the menu is at the top, but the video is still cut off and I would love to remove the large white capitalized "TWO STORIES MEDIA". What code would I use to remove that widget overlay completely and just have the logo and video? Am I asking too much?

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

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

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2026 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