How-To-Integrate-Video-To-A-Product-In-Magento-2-Banner1

Video at product gallery inside product detail page is not working

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.

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

– Maybe it is an issue of Fotorama. When Fotorama checking for video data is looking for the field “video” but Magento is providing “videoUrl”.

– Issues can be found in these files:-

var video = findVideoId(dataFrame.video, true);

When I edited the cached file to put in some console logs, I found that dataFrame did NOT contain the field                  “videoUrl”.

– Please check below files:-

1) My Temporary Fix In This File:

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

in function: _createVideoData

tmpVideoData.videoUrl = tmpInputData.videoUrl;

tmpVideoData.video = tmpInputData.videoUrl; //My Fix

2) /vendor/magento/module-configurable-product/Block/Plugin/Product/Media/Gallery.php

In function: getProductGallery

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;

}

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

in function: getOptionImages

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;

}

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

in function: getGalleryImagesJson

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);

}

About Author:

Yaani Patel

Yaani Author