[Resolved] Page Header video menus disappear on Mobile

Home Forums Support [Resolved] Page Header video menus disappear on Mobile

Home Forums Support Page Header video menus disappear on Mobile

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #220119
    Ramona

    Hi Tom,

    First I want to commend you on the PHENOMENAL work you have done on this Theme. I recommend GP to EVERY Developer and End User I know, and tell them the MUST get the Pro Add-ons.

    I have implemented Page Header with a video on a DEV site at:
    http://tinahustonpublications.fistbumpme.com/

    Everything is working flawlessly on the Desktop, but on my Windows Phone, both Menus disappear. I thought the video was not supposed to play on Mobile. I briefly see the screenshot .png image I selected on the Image Tab, but then the video begins to play and both Menus disappear. Is it just my Windows Phone?

    I have created an Admin login for you to the site so you can tell me what I am doing wrong. How do I get that login to you?

    Thanks,
    Ramona Eid
    (struggling but ENTHUSIASTIC WordPress Developer!)

    #220120
    Ramona

    BTW, I have WP_DEBUG, WP_DEBUG_DISPLAY, and WP_DEBUG_LOG all enabled on localhost and I am not seeing any errors.

    Thanks,
    Ramona Eid
    (struggling but ENTHUSIASTIC WordPress Developer!)

    #220129
    Tom
    Lead Developer
    Lead Developer

    Hi Ramona,

    First off, glad you’re enjoying GP and thank you for recommending it! πŸ™‚

    Just checked on my Android, seemed fine, although there is some overlapping. In the “Advanced Settings” tab, do you have the “Place content behind header” option enabled?

    I wouldn’t doubt that the Windows phone is behind the times, although I don’t have one to test. Maybe I’ll stop by Best Buy and try it out on one of their Windows tablets today.

    In the mean time, can you test it a bit? What if the above option is turned off? Same issue?

    What if full screen isn’t enabled?

    What if vertical align isn’t enabled?

    Let me know πŸ™‚

    #220156
    Ramona

    Hi Tom,

    Thanks for the Troubleshooting directives. I have now managed to STOP the video from playing on my Windows Phone by:
    1. Advanced Settings > Place content behind header > OFF
    2. Content Settings > Paralllex effect > OFF

    Are you still seeing good things on Android?

    Now I have an issue with the white Menu Items and the white Tag Line.

    I have used code before to get to the breakpoints for Tablet and below:

    @media
    (max-width: 961px)

    However, I think I really only want to target Mobile. What should that max-width be? Also, what are the selectors for the Main Menu Items and for the Tag Line?

    Thank you in advance for all of your valuable and expedited help!

    Thanks,
    Ramona Eid
    (struggling but ENTHUSIASTIC WordPress Developer!)

    #220157
    Ramona

    Ooops, spoke too soon. Did a REFRESH on my Windows Phone, and the Video is back.

    Let me test some more and report back to you.

    Thanks,
    Ramona Eid
    (struggling but ENTHUSIASTIC WordPress Developer!)

    #220160
    Ramona

    Hi Tom,

    In testing various configurations, nothing STOPS the video from playing on My Windows Phone, and when it starts on Mobile, it displays over ALL of the Menus etc.

    I have an idea to set the class .generate-page-header-video to display: none; but I don’t know where the Break-point is for Mobile.

    Any help would be greatly appreciated. My Client LOVES this implementation, so I have to figure out a way to make it work!

    Thanks,
    Ramona Eid
    (struggling but ENTHUSIASTIC WordPress Developer!)

    #220165
    Ramona

    Hi Tom,

    I am not sure if this is the best solution because I still feel that the mp4 loads anyway, and it would be nice to prevent that on Mobile.

    What I finally settled on was the following in my Child-Theme style.css:

    /* Portrait tablet and below */

    @media
    (max-width: 961px) {
    .generate-page-header-video {
    display: none;
    }
    .home .main-title a {
    color: #fff;
    }
    .generate-inside-combined-content {
    margin-bottom: 3%;
    }
    button.menu-toggle {
    margin-top: 3%;
    }
    div.generate-combined-content {
    background-image: url(‘../../../wp-content/uploads/2016/08/2015-12-05-create.png’);
    background-repeat: no-repeat;
    }
    }

    Is there another alternative I should be looking at?

    Thanks,
    Ramona Eid
    (struggling but ENTHUSIASTIC WordPress Developer!)

    #220246
    Tom
    Lead Developer
    Lead Developer

    Let’s try disabling it on Windows phones, it seems they autoplay videos.

    Add this to your wp_footer hook (or scripts file if you have one):

    <script>
    jQuery( document ).ready( function($) {
        var isWindowsPhone = /windows phone/i.test(navigator.userAgent.toLowerCase());
        var instance = $('.generate-page-header-video').data('vide');
        if ( isWindowsPhone) {
            instance.destroy();
        }
    });
    </script>

    Worth a shot πŸ™‚

    #220537
    Ramona

    That code sure looked good to me as well.

    Unfortunately it didn’t work. I used instead:

    @media
    (max-width: 767px) {
    .generate-page-header-video {
    display: none;
    }
    .home .main-title a {
    /*color: #fff;*/
    }
    .generate-inside-combined-content {
    /*margin-bottom: 3%;*/
    /*display: none;*/
    }
    button.menu-toggle {
    /*margin-top: 3%;*/
    }
    div.generate-combined-content {
    background-image: url(‘../../../wp-content/uploads/2016/08/2015-12-05-create2.png’);
    background-repeat: no-repeat;
    background-position: center center;
    }
    }

    Thanks so much for all of your help, Tom.

    Ramona Eid

    #220556
    Tom
    Lead Developer
    Lead Developer

    Interesting, I tested it without the Windows phone check and it worked, so maybe that check isn’t firing on your phone. I don’t have a Windows phone so it’s hard for me to test.

    Glad you ended up finding a solution.

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.