Display a video as the featured image on the Products Archive

Adding the code from this article to the child-theme/functions.php file will display the videos uploaded in the product settings as the featured image on the Products Archive (shop, categories) pages.

add_filter('etheme_product_grid_list_product_wrapper_element_attributes', function($attr, $product, $local_settings, $object) {
	global $show_featured_as_video_data;
	if ( !is_array($show_featured_as_video_data) ) 
		$show_featured_as_video_data = array();

	$product_id = $product->get_id();
	$product_video_thumbnail = etheme_get_option('product_video_thumbnail', false);
	if ( etheme_get_custom_field('product_video_thumbnail', $product_id) == 'disable' )
	    $product_video_thumbnail = false;
	if ( !$product_video_thumbnail ) {
		return $attr;
	}

	$size = $local_settings['image_size'] != 'custom' ? $local_settings['image_size'] : 'woocommerce_thumbnail';

	$show_featured_as_video_data[$product_id] = array();

	$video_slides_array = array();
	$video_attachments = array();
	$video_slides = '';

	$product_video_attrs = etheme_get_option('product_video_thumbnail_attributes', array('preload', 'loop'));
    $product_video_pause_on_hover = etheme_get_option('product_video_pause_on_hover', false);
    $size = $local_settings['image_size'] != 'custom' ? $local_settings['image_size'] : 'woocommerce_thumbnail';

	$show_featured_as_video = false;

	if ( $product_video_thumbnail ) {
	    $videos = etheme_get_attach_video($product_id);
	        if (isset($videos[0]) && $videos[0] != '') {
	            $video_attachments = get_posts(array(
	                'post_type' => 'attachment',
	                'include' => $videos[0]
	            ));
	            foreach ($video_attachments as $video) {
	                if ( !$video || !in_array($video->post_mime_type, array('video/mp4', 'video/webm', 'video/ogg'))) continue;
	                $video_slides_array[] = array(
	                    'item_type' => 'video',
	                    'src' => $video->guid,
	                    'type' => str_replace(
	                        array('video/mp4', 'video/webm', 'video/ogg'),
	                        array(
	                            'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
	                            'video/webm; codecs="vp8, vorbis"',
	                            'video/ogg; codecs="theora, vorbis"'
	                        ),
	                        $video->post_mime_type)
	                );
	            }
	        }
	    $has_video = count($video_attachments) > 0;

	    $show_featured_as_video = $has_video || false;
	}

	if ( $show_featured_as_video ) {

		if ( in_array($local_settings['image_hover_effect'], array('slider'))) {
		    $video_slides = wp_json_encode(
		        array(
		            'items' => array_merge($video_slides_array, array_map(
		                function ($item_value) {
		                    return array(
		                        'item_type' => 'image',
		                        'src' => $item_value
		                    );
		                }, explode(';', $object->etheme_get_image_list($product, true, $size))))
		        ));
		}

        $product_video_params = array(
            'muted="muted"'
        );
        if ( in_array('preload', $product_video_attrs))
            $product_video_params[] = 'preload="auto"';
        if ( in_array('loop', $product_video_attrs))
            $product_video_params[] = 'loop="true"';
        if ( in_array('autoplay', $product_video_attrs)) {
            $product_video_params[] = 'autoplay="true"';
            if ($product_video_pause_on_hover)
                $product_video_params[] = 'data-pause-on-hover="true"';
        }
        $video_poster = '';
        if ( in_array('poster', $product_video_attrs) ) {
            if ($product->get_image_id()) {
                $video_poster = wp_get_attachment_image_src($product->get_image_id(), $size, false, array())[0];
            } elseif ($product->get_parent_id()) {
                $video_poster = wp_get_attachment_image_src($product->get_parent_id(), $size, false, array())[0];
            }

            if (!$video_poster) {
                $video_poster = wc_placeholder_img_src($size, array());
            }

            if ( $video_poster )
                $product_video_params[] = 'poster="'.$video_poster.'"';
        }

        $show_featured_as_video_data[$product_id]['video_attachments'] = $video_attachments;
        $show_featured_as_video_data[$product_id]['product_video_params'] = $product_video_params; 

		if (in_array('autoplay', $product_video_attrs) && $product_video_pause_on_hover ) $attr .= ' data-video-hover-state="pause"';

        else if (!in_array('autoplay', $product_video_attrs)) $attr .= ' data-video-hover-state="play"';

        if ( 'slider' == $local_settings['image_hover_effect'] ) : $attr .= ' data-videos="'. esc_attr($video_slides) . '"'; endif;

	}

	return $attr;
}, 10, 4);
add_filter('etheme_product_grid_list_product_element_image', function($image, $product, $local_settings) {

	global $show_featured_as_video_data;
	if ( !is_array($show_featured_as_video_data) )
		$show_featured_as_video_data = array();

	$product_id = $product->get_id();

	if ( empty($show_featured_as_video_data) || !array_key_exists($product_id, $show_featured_as_video_data)) return $image;

    $size = $local_settings['image_size'] != 'custom' ? $local_settings['image_size'] : 'woocommerce_thumbnail';

    $video_sources_shown = 0;
	
	if ( isset($show_featured_as_video_data[$product_id]['video_attachments']) && count( $show_featured_as_video_data[$product_id]['video_attachments'] ) > 0 ): $video_sources_shown = 0; 
		ob_start(); ?>
	    <video <?php echo implode(' ', $show_featured_as_video_data[$product_id]['product_video_params']); ?>>
	        <?php foreach ( $show_featured_as_video_data[$product_id]['video_attachments'] as $video ):
	            if ( $video_sources_shown > 0 ) break; ?>
	            <?php $video_ogg = $video_mp4 = $video_webm = false; ?>
	            <?php if ( $video->post_mime_type == 'video/mp4' && ! $video_mp4 ): $video_mp4 = true; ?>
	                <source src="<?php echo esc_url( $video->guid ); ?>"
	                        type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
	            <?php
	            $video_sources_shown++;
	            endif; ?>
	            <?php if ( $video->post_mime_type == 'video/webm' && ! $video_webm ): $video_webm = true; ?>
	                <source src="<?php echo esc_url( $video->guid ); ?>"
	                        type='video/webm; codecs="vp8, vorbis"'>
	            <?php
	            $video_sources_shown++;
	            endif; ?>
	            <?php if ( $video->post_mime_type == 'video/ogg' && ! $video_ogg ): $video_ogg = true; ?>
	                <source src="<?php echo esc_url( $video->guid ); ?>"
	                        type='video/ogg; codecs="theora, vorbis"'>
	                <?php esc_html_e( 'Video is not supporting by your browser', 'xstore' ); ?>
	            <?php
	            $video_sources_shown++;
	            endif; ?>
	        <?php endforeach; ?>
	    </video>
	    <?php return ob_get_clean() . str_replace('class="', 'class="hidden ', $image); ?> 
	<?php endif;

	return $image; 
}, 10, 3);

add_filter('etheme_product_grid_list_product_element_image_wrapper_class', function($class, $product) {
	global $show_featured_as_video_data;
	if ( !is_array($show_featured_as_video_data) )
		$show_featured_as_video_data = array();

	$product_id = $product->get_id();

	if ( empty($show_featured_as_video_data) || !array_key_exists($product_id, $show_featured_as_video_data)) return $class;

	if ( isset($show_featured_as_video_data[$product_id]['video_attachments']) && count( $show_featured_as_video_data[$product_id]['video_attachments'] ) > 0 ) {
		$class .= ' product-video-as-image';
	}

	return $class;
}, 10, 2);