Product video - Play with one click on mobile

Store Design
, ,
1

Hello! I uploaded a video as my featured media for a product.

Good: On desktops and tablets, when you click the video it plays immediately.

Bad: On phones you have to click the video once to open it in a modal. Then click it again to play.

Is there any way to make phones behave like the desktop and tablet version where it plays immediately instead of requiring a popup?

I guess this happens because the videos and images get put into a slider on phones. But my videos are specifically designed and sized to blend in smoothly with the images, so I really don’t want the extra popup.

I am using the Dawn theme but cannot figure out where the desktop/mobile switch is happening for that behavior.

2

Hello @ADKitchen ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Sections → product-template.liquid file

Locate the section of code that renders the video for the product. It might look like this:

Replace the existing video code with the following code:

Save and preview

Hope this can help.

Transcy

3

@Transcy

Thank you very much for your suggestion and time to think about it, but unfortunately I cannot get it to work.

For reference, here is the page on my store:

https://store.alohadays-kitchen.com/products/basque-cheesecake

Looking at this further, I still don’t have a solution but here are some things I’ve observed:

  • In Chrome on a desktop and also while simulating a tablet, the video plays as desired. Visitors simply click on the video and it plays immediately.

Clicks to watch the video: 1 click

  • Simulating a phone (using Chrome on a desktop): The product media is put into a slider.

Clicking on the video will open a modal that contains the video.

Then clicking the video begins to play it.

Clicks to watch the video: 2 clicks

  • On an actual iPhone: As above, the product media is put into a slider.

Clicking on the video opens the modal. However, it seems that on an iPhone you must next tap the video to “activate” it. And then you can press the Play button.

Clicks to watch the video: 3 clicks

I think can accept 2 clicks. Because the Dawn theme puts the thumbnail into a slider that can be swiped by the finger, you could cause confusion by playing the video when the user actually intended the swipe the slider. So popping it up in a modal is good UX (I guess).

But 3 clicks to watch a video is kind of unacceptable.

I’m now trying to figure out how to avoid the activation step on a smartphone, so the video plays automatically when the modal opens.

According to this page, it seems like it should be possible to autoplay a video on an iPhone:

https://developer.apple.com/documentation/webkit/delivering_video_content_for_safari/

And the Dawn theme renders all the required parameters on the video tag:

<video playsinline=“playsinline” controls=“controls” autoplay=“autoplay” loop=“loop” preload=“none” muted=“muted” …

This is turning out to be more complicated than I expected!

4

So I had the same problem. Fixed this with just some css.

Search for these lines in the css:

.product-media-modal__content > *:not(.active),
.product__media-list .deferred-media {
display: none;
}

And edit it to:

.product-media-modal__content > *:not(.active) {
display: none;
}

And second.. Remove the media query around this line, so that the styling always apply:

.product-media-container .product__modal-opener:not(.product__modal-opener--image) {
display: none;
 }
5

i saw on your website you solved it. Please let me know how you made it :slightly_smiling_face: