Disable Video on Mobile only

Site URL: https://lloydbirchdrone.co.uk/

Hi all,

I have a video on my home page for desktop viewing, this works perfectly. What I'm looking to do is disable it for mobile and use the fall back image? the quality of the video on mobile is pretty poor compared to desktop viewing.

Is this possible? 

Any help would be greatly appreciated.

Lloyd

20 hours ago, Lloydbirch said:

Site URL: https://lloydbirchdrone.co.uk/

Hi all,

I have a video on my home page for desktop viewing, this works perfectly. What I'm looking to do is disable it for mobile and use the fall back image? the quality of the video on mobile is pretty poor compared to desktop viewing.

 

Is this possible? 

 

Any help would be greatly appreciated.

 

Lloyd

Add to Design > Custom CSS

/* remove video - show fallback image on mobile */
@media screen and (max-width:767px) {
body.homepage article section:first-child .sqs-video-background-native__video-player.video-player {
    display: none;
}
body.homepage article section:first-child .sqs-video-background-native__fallback-image--hidden {
    opacity: 1 !important;
}
}

14 hours ago, tuanphan said:

Add to Design > Custom CSS

/* remove video - show fallback image on mobile */
@media screen and (max-width:767px) {
body.homepage article section:first-child .sqs-video-background-native__video-player.video-player {
    display: none;
}
body.homepage article section:first-child .sqs-video-background-native__fallback-image--hidden {
    opacity: 1 !important;
}
}

 

Amazing! Thank you so much! 

Site URL: https://www.jdvcounselingandtherapy.com/

Hi all,

I have the same issue with a video on my home page for desktop viewing, which works on my site perfectly. I'm looking to disable the video for mobile and use the fall back image or image? 

Or, hide the video on one section + show image and show the video on another section + hide image. I saw this solution posted but couldn't figure out the code for my site.

Something like below:

@media only screen and (min-width: 768px) {
  section[data-section-id="6332d1ccb7f71701f90f072e"] {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  section[data-section-id="62616f21a251901291ce8981"] {
    display: none;
  }
}

Any help would be greatly appreciated.

Monica

On 1/28/2023 at 9:58 PM, moni25 said:

Site URL: https://www.jdvcounselingandtherapy.com/

Hi all,

I have the same issue with a video on my home page for desktop viewing, which works on my site perfectly. I'm looking to disable the video for mobile and use the fall back image or image? 

Or, hide the video on one section + show image and show the video on another section + hide image. I saw this solution posted but couldn't figure out the code for my site.

Something like below:

@media only screen and (min-width: 768px) {
  section[data-section-id="6332d1ccb7f71701f90f072e"] {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  section[data-section-id="62616f21a251901291ce8981"] {
    display: none;
  }
}

Any help would be greatly appreciated.

Monica

Hi,

You mean this fallback image?

Yes, hide the video on one section + show image and show the video on another section + hide image you be the best option for me.

On 2/5/2023 at 5:15 AM, moni25 said:

Yes, hide the video on one section + show image and show the video on another section + hide image you be the best option for me.

 

Which section you want to hide video?

And which section you want to hide image?