Can someone help me troubleshoot this issue, I have a sprout video embedded in iframe, in a slick slider, and I have set this iframe to be draggable.
There is a div overlay(.iframe-overlay), that can be swipe and click. It is working fine on JSfiddle, but somehow it throws an “Uncaught Can not find video iframe” error on wordpress webiste.
JSFiddle: https://jsfiddle.net/markbanong/9myn6akd/27/
Site: https://getgoally.com/ (on the “What Parents Are Saying…” section)
Below is my code
html:
<div class="parents-saying template-row row-margin-top">
<div class="container">
<h2>What Parents Are Saying...</h2>
<div class="slider-grandparent-container element-margin-top">
<div class="slider-parent-container">
<div class="slider">
<div class="slider__item">
<div class="iframe-container" style="position:relative;height:0;padding-bottom:177.94253938832253%">
<iframe allow="autoplay" class="sproutvideo-player thirteenth-row-iframe" src="https://videos.sproutvideo.com/embed/119fd4ba181fe5cc98/858cee23708a3b72" ?playertheme="dark&playerColor=2f3437" style="position:absolute;width:100%;height:100%;left:0;top:0;border-radius:8px;" frameborder="0" allowfullscreen="" referrerpolicy="no-referrer-when-downgrade">
</iframe>
<div class="iframe-overlay" data-sprout-id="119fd4ba181fe5cc98/858cee23708a3b72"></div>
</div>
</div>
<div class="slider__item">
<div class="iframe-container" style="position:relative;height:0;padding-bottom:177.94253938832253%">
<iframe allow="autoplay" class="sproutvideo-player thirteenth-row-iframe" src="https://videos.sproutvideo.com/embed/ea90d3b01a10e2cb63/8cd05d2e6c368787" ?playertheme="dark&playerColor=2f3437" style="position:absolute;width:100%;height:100%;left:0;top:0;border-radius:8px;" frameborder="0" allowfullscreen="" referrerpolicy="no-referrer-when-downgrade">
</iframe>
<div class="iframe-overlay" data-sprout-id="ea90d3b01a10e2cb63/8cd05d2e6c368787"></div>
</div>
</div>
<div class="slider__item">
<div class="iframe-container" style="position:relative;height:0;padding-bottom:177.94253938832253%">
<iframe allow="autoplay" class="sproutvideo-player thirteenth-row-iframe" src="https://videos.sproutvideo.com/embed/7990d2b61a1ae3c0f0/aeb336123490329c" ?playertheme="dark&playerColor=2f3437" style="position:absolute;width:100%;height:100%;left:0;top:0;border-radius:8px;" frameborder="0" allowfullscreen="" referrerpolicy="no-referrer-when-downgrade">
</iframe>
<div class="iframe-overlay" data-sprout-id="7990d2b61a1ae3c0f0/aeb336123490329c"></div>
</div>
</div>
<div class="slider__item">
<div class="iframe-container" style="position:relative;height:0;padding-bottom:177.94253938832253%">
<iframe allow="autoplay" class="sproutvideo-player thirteenth-row-iframe" src="https://videos.sproutvideo.com/embed/d390d2b61a1ae3c25a/872e74b9a3a9ea24" ?playertheme="dark&playerColor=2f3437" style="position:absolute;width:100%;height:100%;left:0;top:0;border-radius:8px;" frameborder="0" allowfullscreen="" referrerpolicy="no-referrer-when-downgrade">
</iframe>
<div class="iframe-overlay" data-sprout-id="d390d2b61a1ae3c25a/872e74b9a3a9ea24"></div>
</div>
</div>
<div class="slider__item">
<div class="iframe-container" style="position:relative;height:0;padding-bottom:177.94253938832253%">
<iframe allow="autoplay" class="sproutvideo-player thirteenth-row-iframe" src="https://videos.sproutvideo.com/embed/1190d3b01a10e2c498/d983b9381d41e3bc" ?playertheme="dark&playerColor=2f3437" style="position:absolute;width:100%;height:100%;left:0;top:0;border-radius:8px;" frameborder="0" allowfullscreen="" referrerpolicy="no-referrer-when-downgrade">
</iframe>
<div class="iframe-overlay" data-sprout-id="1190d3b01a10e2c498/d983b9381d41e3bc"></div>
</div>
</div>
<div class="slider__item">
<div class="iframe-container" style="position:relative;height:0;padding-bottom:177.94253938832253%">
<iframe allow="autoplay" class="sproutvideo-player thirteenth-row-iframe" src="https://videos.sproutvideo.com/embed/0690d2b51f1be2c58f/bd697fcb0fcb2c64" ?playertheme="dark&playerColor=2f3437" style="position:absolute;width:100%;height:100%;left:0;top:0;border-radius:8px;" frameborder="0" allowfullscreen="" referrerpolicy="no-referrer-when-downgrade">
</iframe>
<div class="iframe-overlay" data-sprout-id="0690d2b51f1be2c58f/bd697fcb0fcb2c64"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JS:
/**
* Initializes and manages a Slick slider with video playback functionality.
* Videos are played when clicking on an iframe overlay, and the script
* handles both original and cloned slider items.
*/
$(document).ready(function() {
var isDragging = false;
var clickStartX;
/**
* Initializes the Slick slider with specified settings.
*/
$('.parents-saying .slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
dots: true,
infinite: false,
variableWidth: true,
prevArrow: "<img class='a-left slider-arrow slick-prev' src='/wp-content/uploads/2023/08/home-left-arrow.webp'>",
nextArrow: "<img class='a-right slider-arrow slick-next' src='/wp-content/uploads/2023/08/home-right-arrow.webp'>",
responsive: [{
breakpoint: 1024,
settings: {
arrows: false,
}
}]
});
/**
* Attaches event handlers to detect dragging on the slider.
* This helps differentiate between drag and click events.
*/
$('.parents-saying .slider')
.on('mousedown', function(e) {
isDragging = false;
clickStartX = e.pageX;
})
.on('mousemove', function(e) {
if (Math.abs(e.pageX - clickStartX) > 5) {
isDragging = true;
}
})
.on('mouseup', function() {
isDragging = false;
});
/**
* Global click event listener for overlay elements.
* This listener ensures that the click event on overlays triggers
* video playback, regardless of whether the element is original or cloned.
*/
$(document).on('click', '.parents-saying .slider__item .iframe-overlay', function(e) {
if (!isDragging && $(e.target).closest('.slick-slide').hasClass('slick-active')) {
playVideo($(this));
}
});
/**
* Plays the video associated with the clicked overlay.
* @param {jQuery Object} item - The clicked overlay jQuery object.
*/
function playVideo(item) {
const sproutId = item.attr('data-sprout-id');
console.log('SPROUT ID: ', sproutId);
const player = new SV.Player({
videoId: sproutId
});
player.play();
}
});
Also I have added, the sprout javascript player api, in the header as per documentation.
