Ecommerce Shopify WordPress Discussion

Plyr multiple players play on hover and pause when mouse out

I'm following this overflow discussion ( Play multiple Plyr Vimeo embeds on hover ) this solution perfectly working for embedded videos (YouTube, Vimeo etc) unfortunately not working for HTML5 videos. In an Ajax query, I'm fetching videos ( video player could be HTML, YouTube, Vimeo or others ) In this query embedded video (YouTube and Vimeo) working on hover but HTML is not. Here is the section screenshot you might check https://prnt.sc/lYc5q8kIDvb8 first 3 HTML video players ( not working on mouse hover ) and the last 3 YouTube and Vimeo players ( working fine on mouse hover ). Here is my JS code below - <?php $attr['section_id'] = 1; ?> <div class="video-load-more-content-<?php echo esc_attr( $attr['section_id'] ); ?> row"></div> <div class="row"> <div class="col-12 pagination text-center"> <a href="javascript:void(0)" class="vidiow-primary" id="load-more-<?php echo esc_attr( $attr['section_id'] ); ?>" data-action="vidiow_load_more<?php echo esc_attr( $attr['section_id'] ); ?>">Load more</a> </div> </div> <script type="text/javascript"> ;(function ($) { 'use strict'; $(document).ready(function () { let paged = 0; let $buttonSelector = $('#load-more-<?php echo esc_attr( $attr['section_id'] ); ?>'); let $content = $('.video-load-more-content-<?php echo esc_attr( $attr['section_id'] ); ?>'); $buttonSelector.on('click', function(e) { if (e.preventDefault) { e.preventDefault(); } paged++; // Do currentPage + 1, because we want to load the next page $buttonSelector.text('Loading ...'); $.ajax({ type: 'POST', url: '<?php echo esc_url( admin_url( 'admin-ajax.php' )); ?>', dataType: 'json', // <-- Change dataType from 'html' to 'json' data: { action: $buttonSelector.data('action'), nonce: '<?php echo wp_create_nonce( 'vidiow_ajax_load_more' ); ?>', paged, action_name: $buttonSelector.data('action') }, success: function (response) { if(paged >= response.max) { $buttonSelector.hide(); } $content.append(response.content); $buttonSelector.text('Load More'); /** * Video player initialization */ const playerNodes = $('.vidiow_player'); const vidiow_player = playerNodes.map( (currentValue, index, arr) => new Plyr( index, { debug: true, ratio: '16:9', volume: 0, controls: false, muted: true, fullscreen: { enabled: false }, loop: { active: true } }) ).get(); if( vidiow_player ){ vidiow_player.forEach(( player, index ) => player.on("play", () => vidiow_player .filter((p, i) => i !== index) .forEach((p) => p.pause()) ) ); } playerNodes.hover(playVideo, pauseVideo); function playVideo(e){ vidiow_player[playerNodes.index(this)].play(); } function pauseVideo(e){ vidiow_player[playerNodes.index(this)].pause(); } // Initialize bootstrap tooltip $('[data-bs-toggle="tooltip"]').tooltip(); } }); }); $buttonSelector.trigger('click'); }); })(jQuery); </script> HTML code - <!-- Youtube --> <div class="plyr__video-embed vidiow_player"> <iframe src="https://www.youtube.com/embed/<?php echo esc_attr( $custom_video_url ); ?>?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"> </iframe> </div> <!-- HTML 5--> <video class="vidiow_player" playsinline controls data-poster="img.jpg"> <source src="video.mp4" type="video/mp4" /> <source src="video.mp4" type="video/webm" /> </video> Another crucial issue I'm facing in the Ajax process is Plyr, masonry or others need reinitialization inside jQuery "success: function (response)" which is already initialized in the main JS code. Only the first load main js code works but doesn't work when clicking on Ajax action. Note: If you need any more information to make smooth the answering process, please inform me.
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.