How can I set a video to autoplay on a product page?

[umrraz90]

Hi everyone,

I’m looking to set a video to autoplay on my product pages in Shopify. Does anyone have tips or code snippets for making this happen? Specifically, I want the video to start playing automatically when a customer visits the product page or checks the product by itself? 

Thanks in advance for your help!

[BSS-TekLabs · Accepted solution]

Can you add script to theme.liquid @umrraz90 

[BSS-TekLabs · Accepted solution]

[BSS-TekLabs · Accepted solution]

Add this code to base.css to hidden control video @umrraz90 

/* Hide the default video controls */
video::-webkit-media-controls {
  display: none !important;
}
video::-webkit-media-controls-panel {
  display: none !important;
}
video::-webkit-media-controls-play-button {
  display: none !important;
}
video::-webkit-media-controls-start-playback-button {
  display: none !important;
}
video::-webkit-media-controls-timeline {
  display: none !important;
}
video::-webkit-media-controls-current-time-display {
  display: none !important;
}
video::-webkit-media-controls-time-remaining-display {
  display: none !important;
}
video::-webkit-media-controls-seek-back-button {
  display: none !important;
}
video::-webkit-media-controls-seek-forward-button {
  display: none !important;
}
video::-webkit-media-controls-volume-slider {
  display: none !important;
}
video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

[BSS-TekLabs · Accepted solution]

Add more css in base.css

[BSS-TekLabs · Accepted solution]

Can you add script to theme.liquid @umrraz90 

[BSS-TekLabs · Accepted solution]

[powersadhu]

Hello! I've added all of your code to my store, it works with autoplay only at desktop, but not on mobile, can you help?

[BSS-TekLabs]

You can message me privately so I can check for you.

[BSS-TekLabs · Accepted solution]

Add this code to base.css to hidden control video @umrraz90 

/* Hide the default video controls */
video::-webkit-media-controls {
  display: none !important;
}
video::-webkit-media-controls-panel {
  display: none !important;
}
video::-webkit-media-controls-play-button {
  display: none !important;
}
video::-webkit-media-controls-start-playback-button {
  display: none !important;
}
video::-webkit-media-controls-timeline {
  display: none !important;
}
video::-webkit-media-controls-current-time-display {
  display: none !important;
}
video::-webkit-media-controls-time-remaining-display {
  display: none !important;
}
video::-webkit-media-controls-seek-back-button {
  display: none !important;
}
video::-webkit-media-controls-seek-forward-button {
  display: none !important;
}
video::-webkit-media-controls-volume-slider {
  display: none !important;
}
video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

[BSS-TekLabs]

[BSS-TekLabs · Accepted solution]

Add more css in base.css

[BSS-TekLabs · Accepted solution]

Add the following code to fix the problem of images being difficult to swipe.