Add fallback image to cover video on mobile

  • Hi,

    On my front page, I have a cover video at the top. I sacrificed a lot of video quality in order to get a desktop score above 80 in google page insight. But mobile score sucks because of video. Is there any way to add a fallback image under mobile view?

    Underscores theme, default Gutenburg editor, no plugin.

    Thanks.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator t-p

    (@t-p)

    Since you use a commercial theme or plugin and need support, please go to their official support channel. In order to be good stewards of the WordPress community, and encourage innovation and progress, we feel it’s important to direct people to those official locations: https://underscores.me/

    Forum volunteers are also not given access to commercial products, so they would not know why your commercial theme or plugin is not working properly. This is one other reason why volunteers forward you to the commercial product’s vendors. The vendors are responsible for supporting their commercial product.

    Hi,

    What you need can be attain by css code trick is that you have to have both video and image. Through css code you can change the visibility of section depending upon device width. It’s called media query.

    I hope that it will helpful
    Thank You

    Though I don’t have an exact answer… they’re asking if there is a way with the “cover block”. Doesn’t matter what theme. Is there a way to have a fallback image for mobile resolutions if using a video with the cover block? That’s the question. I imagine an option would be using block filters and adding a second image upload to the cover block that loads regardless of the resolution then lazy load the video. There are also some plugins that attempt to help with Pagespeed and UX in regards to video in the repository: Lazy Load for Videos for example.

    Moderator bcworkz

    (@bcworkz)

    You could check if the device is a mobile with wp_is_mobile() and conditionally output an image instead of a video element if so. The image could link to the video on a hosting site, or JavaScript could replace the image with a video element on the click event. Since you can’t just stick PHP code into content, this is probably best implemented as a custom shortcode or block.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Add fallback image to cover video on mobile’ is closed to new replies.