Dawn Theme Stops All Videos on Product Page When An Image Thumbnail Is Clicked

[arieswen415]

Hello Shopify Community!

As the title suggests, when I click on any of the product thumbnails on product page, it stops all the videos on the same page. I would like to ask if anyone knows how to prevent this from happening. I want to keep videos playing even if visitors click on the thumbnail first since they show important details of my products and make my website more dynamic.

The video elements are inserted using Metafields (multi-line text). Here's the code on product page:

{% if product.metafields.custom.a_plus.value.content != blank %}
    {{ product.metafields.custom.a_plus.value.content }}
{% endif %}

The custom.a_plus.content contains a large amount of HTML codes. Here is part of them as an example:

<div class="section-container">
    <div>
        <h1>My Product Title</h1>
        <button onclick="window.open('https://www.youtube.com/watch?v=xyz')">Watch More</button>
    </div>
</div>
<video autoplay="" id="video" loop="" playsinline="" preload="auto" volume="0">
    <source src="path/to/video" type="video/mp4"></source>
</video>

I am not sure if it is caused by the way I embedded the additional content into product page or the native code in Dawn Theme. If anyone could test it out and know what are the possible reasons that cause my videos to stop, that would be great.

Any input is appreciated. Thank you in advance!

[Liam]

Hi Arieswen415,

From looking into this, it seems this behaviour is related to the native code in the Dawn theme, specifically the event listener that is set up for the thumbnail on the product page:

button.addEventListener('click', () => {
      const modal = document.querySelector(this.getAttribute('data-modal'));
      if (modal) modal.show(button);
    });

You can see where in Dawn this event listener is set up in the global.js file here. What you could do to test if this is what is causing your issue is to temporarily disable the event listener by commenting out the event listener code to see if the behavior persists:

// button.addEventListener('click', () => {
//   const modal = document.querySelector(this.getAttribute('data-modal'));
//   if (modal) modal.show(button);
// });

If the videos continue playing normally with the event listener disabled, then it's likely that this is the cause, and you can look at how to modify the behaviour to adjust for this, depending on what you need. 

Hope this helps!

[arieswen415 · Accepted solution]

Hello Liam,

Thank you for your response. I have tried the your solution and it seems that the codes you provided are for the modal box when the main image is clicked. In my case, it is the thumbnails that are stopping the video. However, your method did inspire me where to look for solutions, and fortunately my problems have been solved! Thank you every much for the insights.

I went over the eventListener of the thumbnail elements and found that the cause is the function in media-gallery.js. Therefore I commented out the following codes, and it worked!

// setActiveMedia(mediaId, prepend) {
//   const activeMedia = this.elements.viewer.querySelector(`[data-media-id="${ mediaId }"]`);
//   this.elements.viewer.querySelectorAll('[data-media-id]').forEach((element) => {
//     element.classList.remove('is-active');
//   });
//   activeMedia.classList.add('is-active');

//   if (prepend) {
//     activeMedia.parentElement.prepend(activeMedia);
//     if (this.elements.thumbnails) {
//       const activeThumbnail = this.elements.thumbnails.querySelector(`[data-target="${ mediaId }"]`);
//       activeThumbnail.parentElement.prepend(activeThumbnail);
//     }
//     if (this.elements.viewer.slider) this.elements.viewer.resetPages();
//   }

//   this.preventStickyHeader();
//   window.setTimeout(() => {
//     if (this.elements.thumbnails) {
//       activeMedia.parentElement.scrollTo({ left: activeMedia.offsetLeft });
//     }
//     if (!this.elements.thumbnails || this.dataset.desktopLayout === 'stacked') {
//       activeMedia.scrollIntoView({behavior: 'smooth'});
//     }
//   });
//   this.playActiveMedia(activeMedia);

//   if (!this.elements.thumbnails) return;
//   const activeThumbnail = this.elements.thumbnails.querySelector(`[data-target="${ mediaId }"]`);
//   this.setActiveThumbnail(activeThumbnail);
//   this.announceLiveRegion(activeMedia, activeThumbnail.dataset.mediaPosition);
// }

Commenting out this block of code did not stop the videos that I want it to keep playing nor create any errors. Cases may vary, but here is my solution for anyone who may encounter similar issues.