Why Product Video?
Product Video is the powerfull tool, that highlights your Product's features in better way. Adding high quality videos to your Product engages your customers as human's eyes are naturally drawn to moving lights and images, so web visitors are 73 percent more likely to buy products! According to Google also, around 58 percent consumers prefer featured product video to buy any Product. User always favors product video on Product pages as it takes less effort for them to just watch video instead for reading text. This eventually increases visitor's user experience.
Adding Vimeo Video To Product Page
Magento 2, by default allows to add Vimeo or Youtube Video to your Products. However, while adding Vimeo video from admin panel, sometimes it gives you an error 'Video not found' on Magento version 2.3.x. This issue occurs because of updated Vimeo api. So, how to add video to your product? Let's try to resolve this issue.
Follow the methods below, to fix the issue.
Open the file from Vendor directory, vendor/magento/module-product-video/view/adminhtml/web/js/get-video-information.js
Go to the line containing code 'src = 'https://player.vimeo.com/video/' +this._code + '?api=1&player_id=vimeo' +this._code +timestamp +additionalParams;' and here replace this line with code 'src = 'https://player.vimeo.com/video/' +this._code + '?api=2&player_id=vimeo' +this._code +timestamp +additionalParams;'
After this, go to the function _onRequestHandler() and replace this function, with the code given below
/**
* @private
*/
_onRequestHandler: function () {
var url = this.element.val(),
self = this,
videoInfo,
type,
id,
googleapisUrl;
if (this._currentVideoUrl === url) {
return;
}
this._currentVideoUrl = url;
this.element.trigger(this._REQUEST_VIDEO_INFORMATION_TRIGGER, {
url: url
});
if (!url) {
return;
}
videoInfo = this._validateURL(url);
if (!videoInfo) {
this._onRequestError($.mage.__('Invalid video url'));
return;
}
/**
*
* @param {Object} data
* @private
*/
function _onYouTubeLoaded(data) {
var tmp,
uploadedFormatted,
respData,
createErrorMessage;
/**
* Create errors message
*
* @returns {String}
*/
createErrorMessage = function () {
var error = data.error,
errors = error.errors,
i,
errLength = errors.length,
tmpError,
errReason,
errorsMessage = [];
for (i = 0; i )/ig, ''),
thumbnail: tmp['thumbnail_large'],
videoId: videoInfo.id,
videoProvider: videoInfo.type
};
this._videoInformation = respData;
this.element.trigger(this._UPDATE_VIDEO_INFORMATION_TRIGGER, respData);
this.element.trigger(this._FINISH_UPDATE_INFORMATION_TRIGGER, true);
}
type = videoInfo.type;
id = videoInfo.id;
if (type === 'youtube') {
googleapisUrl = 'https://www.googleapis.com/youtube/v3/videos?id=' +
id +
'&part=snippet,contentDetails,statistics,status&key=' +
this.options.youtubeKey + '&alt=json&callback=?';
$.getJSON(googleapisUrl,
{
format: 'json'
},
$.proxy(_onYouTubeLoaded, self)
).fail(
function () {
self._onRequestError('Video not found');
}
);
} else if (type === 'vimeo') {
$.ajax({
url: 'https://vimeo.com/api/v2/video/' + id + '.json',
dataType: 'jsonp',
jsonpCallback:'jsonResults',
data: {
format: 'json'
},
timeout: 5000,
success: $.proxy(_onVimeoLoaded, self),
/**
* @private
*/
error: function () {
self._onRequestError($.mage.__('Video not found'));
}
});
}
}
Now, just run the following commands and you are good to go php bin/magento setup:upgrade php bin/magento setup:di:compile php bin/magento setup:static-content:deploy And now you can easily add vimeo video to our product without any issue. Then, you can simply save the product and see the video on your storefront product page.
Product Video Not Visisble On Frontend?
In some cases, it may happen that product videos are not visible on frontend and you will see only video thumbnail or preview of product video inspite they are being added from admin panel. Now there are mainly two reasons that you are getting this issue.
Reason - 1
You have overrided catalog_product_view.xml in your custom theme
In this case you can simply resolve this error with following steps :-
Open catalog_product_view.xml in your custom theme folder reside at app/design/vendor/theme/Magento_Catalog/layout/catalog_product_view.xml.
Inside this xml file, serach for container name 'product.info.media'.
Now just add below code under this container
You have not override catalog_product_view in your theme but still getting this issue.
$.widget('mage.videoVimeo', $.mage.productVideoLoader, {
/**
* Initialize the Vimeo widget
* @private
*/
_create: function () {
var timestamp,
additionalParams = '',
src;
this._initialize();
timestamp = new Date().getTime();
this._autoplay = true;
if (this._autoplay) {
additionalParams += '&autoplay=1';
}
if (this._loop) {
additionalParams += '&loop=1';
}
/* change for vimeo video start */
src = 'https://player.vimeo.com/video/' +
this._code + '?api=2&player_id=vimeo' +
this._code +
timestamp +
additionalParams;
/* change for vimeo video end */
Now in this case, problem could be video url that you are getting on storefront and video url you are getting on admin panel for video iframe is different. So to resolve this issue you have to override vendor/magento/module-product-video/view/frontend/web/js/load-player.js. In this file issue is in the code below here replace line 332 with the code this._code + '?api=2&player_id=vimeo' + Now just run php bin/magento setup:upgrade and then refresh your product page and you should get product video in the product gallery on storefront.
Here, it may be a case that you are using fotorama zoom in and zoom out functionality for your product view page on product gallery. In this situation your product video may be working only when you are viewing product video on full screen. This issue occurs because product video iframe is not being available to fotorama, when you click on product video preview in product gallery. You can resolve this issue simply by adding changes to the function _setVideoEvent existing inside file vendor/magento/module-product-video/view/frontend/web/js/fotorama-add-video-events.js with the following code by overriding the file vendor/magento/module-product-video/view/frontend/web/js/fotorama-add-video-events.js in your theme
And then replace the code of function _setVideoEvent with the code given below
/**
*
* @param {Object} $image
* @param {Object} PV
* @param {Object} fotorama
* @param {Number} number
* @private
*/
_setVideoEvent: function ($image, PV, fotorama, number) {
$image.find('.magnify-lens').remove();
/* change for vimeo video start */
if (!this.isFullscreen) {
if ($('.fotorama-item.fotorama .fotorama__nav-wrap').find('.video-thumb-icon.fotorama__active')) {
var videoContainer = $('.fotorama__stage__shaft.fotorama__grab').find('.fotorama-video-container.fotorama__active');
this.createVimeoIframe(videoContainer);
if (this.Base) {
this._hideCloseVideo();
}
}
}
/* change for vimeo video end */
$image
.off('click tap', $.proxy(this._clickHandler, this))
.on('click tap', $.proxy(this._clickHandler, this));
this._handleBaseVideo(fotorama, number); //check for video is it base and handle it if it's base
},
createVimeoIframe: function (element) {
var type;
if ($(element).hasClass(this.VU) && $(element).find('iframe').length === 0) {
$(element).removeClass(this.VU);
type = $(element).find('.' + this.PV).data('type');
if (this.vimeoJSFrameworkLoaded && type === this.VI) {
$(element).find('.' + this.PV).productVideoLoader();
} else if (type === this.VI) {
this._showLoader();
this.onVimeoJSFramework = function () {
$(element).find('.' + this.PV).productVideoLoader();
this._hideLoader();
}.bind(this);
} else {
$(element).find('.' + this.PV).productVideoLoader();
}
$('.' + this.FTAR).addClass(this.isFullscreen ? 'fotorama__arr--shown' : 'fotorama__arr--hidden');
}
},
Now, just run php bin/magento setup:upgrade and then refresh your product page now product video should start working when you click on video preview in product gallery without zoom in also.
that.requestFullScreen = function () {
if (o_allowFullScreen && !that.fullScreen) {
/* these lines are commmented to enable zoom functionality for product video */
//check that this is not video
// var isVideo = $((that.activeFrame || {}).$stageFrame || {}).hasClass('fotorama-video-container');
// if(isVideo) {
// return;
// }
scrollTop = $WINDOW.scrollTop();
scrollLeft = $WINDOW.scrollLeft();
lockScroll($WINDOW);
updateTouchTails('x', true);
measuresStash = $.extend({}, measures);
$fotorama
.addClass(fullscreenClass)
.appendTo($BODY.addClass(_fullscreenClass));
$HTML.addClass(_fullscreenClass);
unloadVideo($videoPlaying, true, true);
that.fullScreen = true;
if (o_nativeFullScreen) {
fullScreenApi.request(fotorama);
}
that.resize();
loadImg(activeIndexes, 'stage');
updateFotoramaState();
triggerEvent('fullscreenenter');
if (!('ontouchstart' in window)) {
$fullscreenIcon.focus();
}
}
return this;
};
Although, there may be case that your product video is working correctly but zoom in functionality is not working for product video. In this case you have to check your fotorama.js. In this js file search for the function that.requestFullScreen. Here you can see that there is a check for video and if on request of full screen, fotorama finds that it is video then it simply returns false. This is the main reason why zoom in functionality is not working for product video in prouduct gallery. So, to enable zoom in for product video just comment or remove the code as below. Now, just run php bin/magento setup:upgrade and refresh the page now you should see zoom in functionality working for your product video also.
But here comes the crucial part, suppose you have added only product video from admin panel and maked it as a base and you don't added any image for the product. In this case if you have commented or removed the code as above, and when you load the product view page the product video will immediatly open fullscreen mode to play the video. Don't worry we can resolve this too. To resolve this you have to just overriding file vendor/magento/module-product-video/view/frontend/web/js/fotorama-add-video-events.js in your theme and adding changes in _handleBaseVideo existing in with the following code. Now just run command php bin/magento setup:upgrade and refresh your product view page, you should see everything working correctly.
/**
* Handle base video
* @param {Object} fotorama
* @param {Number} srcNumber
* @private
*/
_handleBaseVideo: function (fotorama, srcNumber) {
var waitForFroogaloop,
videoData = this.options.videoData,
activeIndex = fotorama.activeIndex,
number = parseInt(srcNumber, 10),
activeIndexIsBase = videoData[activeIndex];
if (!this.Base) {
return;
}
if (activeIndexIsBase && number === 1 && $(window).width() > this.MobileMaxWidth) {
if (this.options.videoData[fotorama.activeIndex].provider === this.VI) {
waitForFroogaloop = setInterval($.proxy(function () {
if (window.Froogaloop) {
clearInterval(waitForFroogaloop);
this.fotoramaItem.data('fotorama').activeFrame.$stageFrame[0].click();
this.Base = false;
}
}, this), 50);
} else { //if not a vimeo - play it immediately with a little lag in case for fotorama fullscreen
setTimeout($.proxy(function () {
fotorama.requestFullScreen();
this.fotoramaItem.data('fotorama').activeFrame.$stageFrame[0].click();
this.Base = false;
}, this), 50);
}
}
},
Any doubts about this solution?
If so, please feel free to Contact Us I'd be happy to help you out. Thank you! Happy coding.