Video on hover for portfolio items

Hi,

Are you going to use mp4 videos on your site? This script might work for the portfolio grid but you have to add the videos as the portfolio items’ external url.

Add this in the functions.php file:

add_action('wp_footer', 'ava_custom_portfolio_video', 9999);
function ava_custom_portfolio_video(){
	?>
	<script type="text/javascript">
		(function($) {	
            $('.grid-entry').each( function(e) {
                var entry = $(this);
                var link = entry.find('.grid-image');
                var poster = link.find('img');
                var video = '<video class="w-100 grid-video" loop="" preload="true" controls="false" muted=""><source src="'+link.attr("href")+'" type="video/mp4"></video>';

                $(video).appendTo(entry);  
                var video = entry.find('video');
                
                $(this).hover( hoverVideo, hideVideo );

                function hoverVideo(e) {              
                    video.get(0).play(); 
                    link.css('z-index', '1');
                }

                function hideVideo(e) {
                    video.get(0).pause(); 
                    link.css('z-index', '3');
                }
            });

            $('.grid-video', 'body').avia_html5_activation({ratio:'16:9'});
		})(jQuery);
	</script>
	<?php
}

And then use this on the Quick CSS field:

.grid-video .mejs-controls, .grid-video .mejs-button, .grid-video .mejs-overlay-button {
  display: none !important;
}

.grid-video {
  position: absolute;
  top: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 2;
}

.grid-video video {
  object-fit: cover !important;
}

NOTE: This is not going to work for youtube or vimeo videos.

Best regards,
Ismael