How to get product video as base and thumbnail in product listing page. Currently, Only Video preview image is showing in listing page. But I want to display video in listing page instead of the preview image.


You can get Media collection of particular product by loading it in custom helper as below:

namespace Your\Module\Helper;

use Magento\Catalog\Api\ProductRepositoryInterface;

class Data extends \Magento\Framework\Url\Helper\Data
    public function __construct(
        ProductRepositoryInterface $productRepository,
    ) {
        $this->productRepository = $productRepository;

    public function getMediaGalleryImages($product)
        $_product = $this->productRepository->get($product->getSku(), false, null, true);

        return $_product->getMediaGalleryImages();

Please copy


to your custom theme.


Now in list.phtml file, you can call this function to load the video url if it's available otherwise show the regular image:

$video = false;
$galleryImages = $this->helper('Your\Module\Helper\Data')->getMediaGalleryImages($_product);
if ($galleryImages) {
    foreach ($galleryImages as $primage) {
        $imageData = $primage->getData();
        // Check media type
        if (isset($imageData['media_type']) && $imageData['media_type'] == 'external-video') {
            $video = true;
            if (strpos($imageData['video_url'], 'youtube.com') !== false) {
                echo preg_replace("/\s*[a-zA-Z\/\/:\.]*youtube.com\/watch\?v=([a-zA-Z0-9\-_]+)([a-zA-Z0-9\/\*\-\_\?\&\;\%\=\.]*)/i","<iframe width=\"240\" height=\"300\" src=\"//www.youtube.com/embed/$1\" frameborder=\"0\" allowfullscreen></iframe>", $imageData['video_url']);
            }elseif(strpos($imageData['video_url'], 'vimeo.com') !== false){
                echo "<iframe width=\"240\" height=\"300\" src=".$imageData['video_url']." frameborder=\"0\" allowfullscreen></iframe>";

<?php if(!$video){ ?>
    <?= $productImage->toHtml() ?>
<?php } ?>

For vimeo, add embedded urls for product video to make them playable at list page. Please note that it would take some extra time to load page first time as we are loading product to get media collection.

  • Thank you himmat, Its working well for my case. Dec 18 '18 at 9:33
  • Great! Happy to help :) Dec 18 '18 at 9:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.