There’s a ‘Recent changes’ drop down in the code editor, just roll it back to the last save before you added the code that will work for sections and snippets.
You should make code changes to offline themes, so duplicate your live theme and work off that if everything works then publish that theme.
There’s plenty of resources online for stuff like this.
Thiw worked great for me! Question: is there a way to have each video reset to the beginning when they are rolled off. At present the videos seem to be auto playing all the time, even when not rolled over. This creates the effect that sometimes when they are rolled over they are in the middle of the video, which is less that optimal. Thanks for any ideas!
the updated version here [https://github.com/peterbrunton/shopify-gists/blob/main/product-card-rollover-video]
plays on mouseenter and pauses on mouseleave
class RolloverVideo extends HTMLElement {
connectedCallback() {
this.video = this.querySelector('video');
if (this.video) {
this.video.muted = true;
const cardWrapper = this.closest('.card-wrapper');
cardWrapper.addEventListener('mouseenter', () => {
if (this.video.paused) {
this.video.play();
}
});
cardWrapper.addEventListener('mouseleave', () => {
this.video.pause();
});
}
}
}
customElements.define('rollover-video', RolloverVideo);
Fantastic! I added this.video.currentTime = 0; to the mouseleave and it works just how I want it to. Thanks!
Thank You for the solution, it is really helpful, and it is fixed in one time only Thank You
I have been looking for it for a while. You are a savior.
Thank you for the help. You’re the DARK KNIGHT.