hide timeline indicators on header video on mobile

YugoBangkok
Tourist
21 0 2

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)

 

Capture d’écran 2024-02-08 à 15.05.33.png

Capture d’écran 2024-02-08 à 15.05.53.png

Replies 14 (14)

Emirates7
Shopify Partner
214 50 40

Hi YugoBangkok,

 

Your video tag element should have:

autoplay muted loop playsinline

 

Regards,

Emirates7

YugoBangkok
Tourist
21 0 2

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

Emirates7
Shopify Partner
214 50 40

Hi,

 

Can you send me your store url?

 

Regards,

Emirates7

YugoBangkok
Tourist
21 0 2

URL

Emirates7
Shopify Partner
214 50 40

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

YugoBangkok
Tourist
21 0 2

Where is this on my dawn thème ? 🥲

Emirates7
Shopify Partner
214 50 40

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

YugoBangkok
Tourist
21 0 2

Capture d’écran 2024-02-08 à 15.44.21.png

 Like this ? 🥲 

Emirates7
Shopify Partner
214 50 40

Before </head>. Sorry for my mistake.

YugoBangkok
Tourist
21 0 2

Capture d’écran 2024-02-08 à 15.44.21.png

  like this ?

Emirates7
Shopify Partner
214 50 40

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

YugoBangkok
Tourist
21 0 2

Capture d’écran 2024-02-08 à 16.45.01.png

like this ? 

Emirates7
Shopify Partner
214 50 40

Move it to 303 line.

YugoBangkok
Tourist
21 0 2

Sorry, nothing work as expected.