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.phpIn 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.phpin 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.phpin 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);
}