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.

1 Answer 1


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. Commented Dec 18, 2018 at 9:33
  • Great! Happy to help :) Commented Dec 18, 2018 at 9:42
  • Goodbye performance Commented May 11, 2023 at 22:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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