Shopify themes, liquid, logos, and UX
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)
Hi YugoBangkok,
Your video tag element should have:
autoplay muted loop playsinline
Regards,
Emirates7
Hello, no it doesn't work (safari & chrome)
Hi,
Can you send me your store url?
Regards,
Emirates7
URL
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
Where is this on my dawn thème ? 🥲
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
Like this ? 🥲
Before </head>. Sorry for my mistake.
like this ?
You have this code between </head> and <body>. You need to move it before tag </head> so code</head><body>. Not </head>code<body>.
like this ?
Move it to 303 line.
Sorry, nothing work as expected.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025