Magento 2: Videos not working in Product gallery

Question

Video at product gallery inside product detail page is not working, However, it is working from admin panel but on product view it is showing only video thumbnail.

Video is not playing while clicking on video thumbnail.

Can any one give suggestion?

Thanks

Answer 1

Fotorama, when checking for video data, is looking for the field "video" but Magento is providing "videoUrl".

Fotorama does the check in checkForVideo() [fotorama.js - fotorama/fotorama]

Please note the line that reads the following:

var video = findVideoId(dataFrame.video, true); When I edited the cached file to put in some console logs, it showed that dataFrame did NOT contain the field "videoUrl".

Issues can be found in these files:

/vendor/magento/module-product-video/view/frontend/web/js/fotorama-add-video-events.js

in function: _createVideoData

My Temporary Fix In This File:

tmpVideoData.videoUrl = tmpInputData.videoUrl; tmpVideoData.video = tmpInputData.videoUrl; //My Fix /vendor/magento/module-configurable-product/Block/Plugin/Product/Media/Gallery.php

in function: getProductGallery

My Temporary Fix In This File:

private function getProductGallery($product)
{
    $result = [];
    $images = $product->getMediaGalleryImages();
    foreach ($images as $image) {
        $result[] = [
            'mediaType' => $image->getMediaType(),
            'videoUrl' => $image->getVideoUrl(),
            'video' => $image->getVideoUrl(), //This is new
            'isBase' => $product->getImage() == $image->getFile(),
        ];
    }
    return $result;
}

/vendor/magento/module-configurable-product/Block/Product/View/Type/Configurable.php

in function: getOptionImages

My Temporary Fix In This File:

protected function getOptionImages()
{
    $images = [];
    foreach ($this->getAllowProducts() as $product) {
        $productImages = $this->helper->getGalleryImages($product) ?: [];
        foreach ($productImages as $image) {
            $images[$product->getId()][] =
                [
                    'thumb' => $image->getData('small_image_url'),
                    'img' => $image->getData('medium_image_url'),
                    'full' => $image->getData('large_image_url'),
                    'caption' => $image->getLabel(),
                    'position' => $image->getPosition(),
                    'isMain' => $image->getFile() == $product->getImage(),
                    'type' => str_replace('external-', '', $image->getMediaType()),
                    'videoUrl' => $image->getVideoUrl(),
                    'video' => $image->getVideoUrl(), //This is new
                ];
        }
    }
return $images;

}

/vendor/magento/module-catalog/Block/Product/View/Gallery.php

in function: getGalleryImagesJson

My Temporary Fix In This File:

public function getGalleryImagesJson()
{
    $imagesItems = [];
    foreach ($this->getGalleryImages() as $image) {
        $imagesItems[] = [
            'thumb' => $image->getData('small_image_url'),
            'img' => $image->getData('medium_image_url'),
            'full' => $image->getData('large_image_url'),
            'caption' => $image->getLabel(),
            'position' => $image->getPosition(),
            'isMain' => $this->isMainImage($image),
            'type' => str_replace('external-', '', $image->getMediaType()),
            'videoUrl' => $image->getVideoUrl(),
            'video' => $image->getVideoUrl(), //This is new
        ];
    }
    if (empty($imagesItems)) {
        $imagesItems[] = [
            'thumb' => $this->_imageHelper->getDefaultPlaceholderUrl('thumbnail'),
            'img' => $this->_imageHelper->getDefaultPlaceholderUrl('image'),
            'full' => $this->_imageHelper->getDefaultPlaceholderUrl('image'),
            'caption' => '',
            'position' => '0',
            'isMain' => true,
            'type' => 'image',
            'videoUrl' => null,
            'video' => null, //This is new
        ];
    }
    return json_encode($imagesItems);
}