Theme customization help

I want to have a video background for the main view, but a static background for mobile and tablet.

And also it does NOT autoplay, and when I use a semi-transparent background on a region the Youtube PLAY button shows. Very yucky

  • Predrag Dubajic
    • Support

    Hi Dewey,

    Hope all is well :slight_smile:

    I want to have a video background for the main view, but a static background for mobile and tablet.

    Once you have added your region and set video as a background you can switch to responsive mode, in there change Tablet and Phone breakpoints and in there when you edit region background you can select static image to be used instead of video.

    First you will see edit button in responsive modes:

    And then when you click on that you can change background type:

    And also it does NOT autoplay, and when I use a semi-transparent background on a region the Youtube PLAY button shows. Very yucky

    I don't see any video set as background on the site provided so I'm not sure what's going on here, could you provide me with URL of the exact page and perhaps a screenshot of this so I can better understand this part?

    Best regards,

    Predrag

  • Dewey
    • Site Builder, Child of Zeus

    Hi Predrag. Thanks! The site is davis-thompson.com/adgaudia

    I am not trying to edit the region on mobile, I am trying to edit the site-wide background.

    I have a video of animated waves and palm trees. It looks great and runs great on full size, but it does not auto play and looks awful on mobile. Please take a look. Can I set the site wide background different for mobile?

    Thanks

  • Predrag Dubajic
    • Support

    Hi Dewey,

    Thanks for the additional info, it makes more sense now :slight_smile:

    However, the URL you linked is showing 404 for me and when I’m logged in to admin it then try to go to home page it redirects me to davis-thompson.com

    On there I don’t see any video so I’m still not sure how this looks on mobile.

    On smaller screens the content of site takes the full width so the video should be disabled by default.

    Because of that there’s no option to change the background on smaller screens.

    Best regards,

    Predrag

  • Predrag Dubajic
    • Support

    Hi Dewey,

    Thanks for additional information, I can now see what’s going on.

    Thing here is that Global Background can only be changed on large screens and they can’t be further adjusted for mobile devices, but there are two workarounds that you can do here.

    So, first solution would be to change region background.

    Since region on smaller screens covers video and has an option to have different backgrounds on mobile and desktop screens you can change it from transparent to image and that will hide video and play button as well.

    You can do this within responsive mode by editing region background in the way I explained in my first comment in this thread.

    Other solution would be by applying some CSS within responsive mode, this should do the trick:

    .upfront-output-bg-overlay iframe {
    display: none;
    }

    .upfront-output-bg-overlay {
    background: url(IMAGE_URL);
    background-size: contain;
    background-repeat: no-repeat;
    }

    You just need to replace IMAGE_URL with an URL to your desired static image.

    Hope this helps :slight_smile:

    Best regards,

    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.