I recently implemented a feature on my WordPress site that allows videos to start playing when the mouse hovers over their thumbnails and pause when it leaves. However, I encountered an issue where this function works perfectly upon initial page load but fails to work with additional content loaded via ajax.
Although I'm still learning JavaScript, I have identified that my code ceases to function properly when new content is added dynamically through ajax. I've read about using an "on" state but struggle to integrate it with my current code structure.
$(document).ready(function() {
var figure = $(".video").hover( hoverVideo, hideVideo );
function hoverVideo(e) {
$('video', this).get(0).play();
}
function hideVideo(e) {
$('video', this).get(0).pause();
}
});
I understand that the issue lies in the fact that the new content is not being recognized as "ready" or that the script lacks awareness of dynamically added elements due to missing page reloads. So, any suggestions on how to make this work seamlessly with dynamic content? Appreciate your help!