Re: hide timeline indicators on header video on mobile

YugoBangkok · ‎02-08-2024

Hello everyone! I have a background video in my header that works perfectly in desktop mode, the video is non-clickable and doesn't have any timeline markers either, everything works well. However, on mobile, the video is displayed but I can click on it (which makes it display in full screen) and on top of that, I can see the timeline markers.

Thanks you 😀

1st picture : mobile

2cd picture : Desk (okay)

Markit-Themes · ‎02-08-2024

Hi YugoBangkok,

Your video tag element should have:

autoplay muted loop playsinline

Regards,

Emirates7

I am available for freelance work | Chat on WhatsApp.

YugoBangkok · ‎02-08-2024

Hello, no it doesn't work (safari & chrome)

Markit-Themes · ‎02-08-2024

Hi,

Can you send me your store url?

Regards,

Emirates7

I am available for freelance work | Chat on WhatsApp.

YugoBangkok · ‎02-08-2024

URL

Markit-Themes · ‎02-08-2024

It works fine at my mobile phone. Try add below code to your javascript.

          $("video").each(function () {
            this.controls = false;
            $(this).get(0).play();
          });

Regards,

Emirates7

I am available for freelance work | Chat on WhatsApp.

YugoBangkok · ‎02-08-2024

Where is this on my dawn thème ? 🥲

Markit-Themes · ‎02-08-2024

Hi,

Open a file layout/theme.liquid and find <body>. Before <body> put below code:

<script type="text/javascript">
var myVideo = document.getElementsByTagName("video")[0];    
if(myVideo) {
myVideo.controls = false;
}
</script>

Regards,

Emirates7

I am available for freelance work | Chat on WhatsApp.

YugoBangkok · ‎02-08-2024

Like this ? 🥲

Markit-Themes · ‎02-08-2024

Before </head>. Sorry for my mistake.

I am available for freelance work | Chat on WhatsApp.

YugoBangkok · ‎02-08-2024

like this ?

Markit-Themes · ‎02-08-2024

You have this code between </head> and <body>. You need to move it before tag </head> so code</head><body>. Not </head>code<body>.

I am available for freelance work | Chat on WhatsApp.

YugoBangkok · ‎02-08-2024

like this ?

Markit-Themes · ‎02-08-2024

Move it to 303 line.

I am available for freelance work | Chat on WhatsApp.

YugoBangkok · ‎02-08-2024

Sorry, nothing work as expected.

Re: hide timeline indicators on header video on mobile

hide timeline indicators on header video on mobile

Community Blog Articles