[Support request] Video unit is not loading in mobile version

Home Forums Support Video unit is not loading in mobile version

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1224325
    Sumasri Gangapathruni

    Hi,

    There is a video ad unit on my site (other than homepage) which is loading on desktop version whereas it is not loading on mobile version. I have contacted the Ad network support team and they suggested me to do the following.

    Regarding the mobile unit – I noticed that the placement is set on display “block” instead of “none”. try to change that and see if that works (see below).

    https://drive.google.com/file/d/1REfTUvIZkAQbQMtSct-h4HeVcFubF5cY/view?usp=sharing

    Could you please help me with the code.

    Thanks in advance.

    Best regards,
    Rajkumar

    #1224341
    Leo
    Staff
    Customer Support

    Hi there,

    Looks like that’s the inline style coming from the plugin itself.

    Can you follow up with them on how to change that? It shouldn’t be related to the theme.

    #1224358
    Sumasri Gangapathruni

    Hi Leo,

    I’m not using any plugin to display that Ad. I have added just a code in the header section. Earlier, I contacted them to disable the video ad on my homepage. Even for that, they said it’s not possible for them to do that. So I have added CSS code in my child theme to disable the video unit on my homepage and it worked well.

    Can I add this code as they suggested in the screenshot which I have attached in my earlier message?

    .code-block{
    display: none;
    }
    #1224387
    Leo
    Staff
    Customer Support

    Yup you sure can!

    It can be added using one of these methods:
    Adding CSS: https://docs.generatepress.com/article/adding-css/

    #1224421
    Sumasri Gangapathruni

    Hi Leo,

    Can I simply add the following code in my child theme style.css or do I need to add any media query for a mobile version?

    Please let me know the correct code for mobile version with a media query.

    .code-block{
    display: none;
    }
    #1224700
    David
    Staff
    Customer Support

    Hi there,

    this CSS for mobile only:

    @media (max-width: 768px) {
        .code-block {
            display: none;
        }
    }

    You may find this useful:
    https://docs.generatepress.com/article/responsive-display/

    #1243978
    Sumasri Gangapathruni

    Hi David,

    I have added the above code in my child theme CSS but didn’t see the video unit.

    I got a response from the Ad Network as “The reason the unit is not loading on mobile is that on the main page (homepage), the player is placed inside a hidden div which prevents the unit from loading completely on mobile.”

    Could you please help me in fixing this.

    Thanks in advance.

    #1244121
    David
    Staff
    Customer Support

    I am confused.
    You wanted to hide ( display: none; ) the .code-block element for mobile which is what the CSS we provided does.

    Can you explain what the issue is you’re trying to fix ?

    #1244330
    Sumasri Gangapathruni

    Hi David,

    Actually, there is a Video Ad Unit on my site. Which loads right-hand side bottom. I would like to fix the following.

    1. Video Ad is not loading on mobile devices.
    2. How to hide this video ad on just the homepage.

    https://drive.google.com/file/d/1REfTUvIZkAQbQMtSct-h4HeVcFubF5cY/view?usp=sharing

    Thanks,
    Rajkumar

    #1244815
    Tom
    Lead Developer
    Lead Developer

    1. Where is the hidden div, and what’s hiding it? Can you show us a screenshot? The one you’ve shared isn’t showing anything that would hide it.

    2. You can target the div on the home page like this:

    .home .your-div-class {
        display: none;
    }
    #1249103
    Sumasri Gangapathruni

    Hi Tom,

    Here is the response from the Ad network.

    Regarding the mobile IVT Hidden – below see tech solution for it:
    “Our tag is integrated by hardcoding in the next manner:

    <div class="code-block code-block-2 ai-viewport-1" style="margin: 8px auto; text-align: center; display: block; clear: both; max-width: 650px;">
    

    There is a class named ” ai-viewport-1 ” that hides this element on narrow screens with max width 767px.
    By removing this class from the element, the IVT hidden will be resolved, but… here is the main trouble!

    The template used for this placement is not suitable for mobile screens. Please see the attached screenshot.”

    Image 1

    One way to solve it is to try to make the template responsive.
    Another way is to define another placement for mobile with an appropriately sized or responsive template.

    Could you integrate our tag “as is,” and not via the “EZ-screx” system?

    Image 2

    Could you please help me in adding an appropriate code on my site.

    Thanks in advance.

    #1250023
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    The images aren’t loading for me – can you check?

    GeneratePress itself is responsive by default – you shouldn’t need to do anything special regarding the theme to get the ads to display.

    #1250367
    Sumasri Gangapathruni

    Hi Tom,

    Thanks for your prompt response.

    Here are the links to the above images

    Image2

    Image1

    Thanks,
    Rajkumar

    #1251644
    Tom
    Lead Developer
    Lead Developer

    The images still aren’t loading, even when I open the URLs in a new tab.

    Are we sure it’s a theme-related issue? If there anything specific the ad network is seeing that needs to be tweaked on the theme side of things?

    #1252152
    Sumasri Gangapathruni

    Hi Tom,

    I am sorry. Hope this time you can access these images.

    https://drive.google.com/file/d/1TqBBPoC6eiStych--uuRpwkDB1ev6xDe/view?usp=sharing

    https://drive.google.com/file/d/1rlvScy7_s2AQXv0oMxG6yIvCvPPsDCms/view?usp=sharing

    Thanks,
    Rajkumar

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