Different Image/Video Mobile vs Desktop Sense Theme

Store Design
1

Hello, I am wanting to use a custom liquid block on the Sense theme to show different media (image or video) for the desktop and mobile versions of my website. I have tried using the code below, but it only successfully works on the desktop version of the website. When I view the webpage on a mobile device both the specified desktop and mobile media versions are displayed. What changes should I make to the code to only have the proper media show when viewing the desktop and mobile versions of the site? Thanks in advance!

My website url is - https://kovaasport.com/

[

](https://kovaasport.com/collections/bike-jerseys)
2

Hello @bikerboi

See above answer :

DipenPanchal_0-1650885330074.png
DipenPanchal_0-1650885330074.png855×373 41.6 KB

Solution: make the quote same

DipenPanchal_1-1650885437418.png
DipenPanchal_1-1650885437418.png1186×527 86.4 KB

1 Like
3

@SetuBridge_1 Thank you! that removes the second video from the desktop site. Now when I load the homepage on my iPhone the video does not automatically loop and play like it does on desktop… There is a ‘play’ button over the video - any suggestions how to fix this? When viewing the preview in the Shopify page builder it appears to work fine, so not sure what fixes I need to incorporate.

IMG_040A41943059-1.jpeg
IMG_040A41943059-1.jpeg1170×2532 261 KB

1 Like
4

Hello

  • iOs 10+ allow video autoplay inline. but you have to turn off “Low power mode” on your iPhone.

  • playsinline worked for me in conjunction with muted keeping in mind the low power mode quirk on iPhone

DipenPanchal_0-1651038302708.png

I hope it will works if not please try the below answer

Here is a little hack to overcome all the struggles you have with video autoplay on a website:

  1. Check video is playing or not.
  2. Trigger video play on events like body click or touch.

Note: Some browsers don’t let videos autoplay unless the user interacts with the device.

So scripts to check whether the video is playing are:

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});

And then you can simply autoplay the video by attaching event listeners to the body:

$('body').on('click touchstart', function () {
        const videoElement = document.getElementById('home_video');
        if (videoElement.playing) {
            // video is already playing so do nothing
        }
        else {
            // video is not playing
            // so play video now
            videoElement.play();
        }
});
1 Like