Magento Version: 2.2.2
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);
}
