The Vimeo video is not working on the product page. It shows the thumbnail image, but when clicking, it shows the loading gif, but the video is not getting played. We had an issue when adding the video to the product on the admin panel, it showed video not found error. I fixed it by updating the app/code/Magento/ProductVideo/view/adminhtml/web/js/get-video-information.js file as given here https://github.com/magento/magento2/commit/f2231f8d953bb650c3462a824716fd8972c6bb6c. But now the video is not playing on frontend.

CodePudding user response：

What exactly is your error displaying on the frontend product page? Please confirm your Magento version and the steps to reproduce you follow for the issue.

You can check the below fixes for Magento 2.3.5 https://github.com/magento/magento2/commit/f2231f8d953bb650c3462a824716fd8972c6bb6c

And for Magento 2.4.1 https://github.com/magento/magento2/pull/31767/files

Applying the patch fixes the problem locally: https://support.magento.com/hc/en-us/articles/360047139492

https://support.magento.com/hc/en-us/articles/4405321730445-MDVA-38308-Error-after-adding-Vimeo-videos-to-disabled-products

Use the command to apply the patch via composer:

composer require magento/quality-patches

To view the patch list.

./vendor/bin/magento-patches status

You must clean the cache after applying patches to see changes in the Magento application:

/bin/magento cache:clean

That's it

CodePudding user response：

I was able to fix this by updating lib/web/fotorama/fotorama.js

I have changed the functions playVideo & onStageTap.

that.playVideo = function () {
            var dataFrame = activeFrame,
                // video = dataFrame.video,
                video = null,
                _activeIndex = activeIndex;
                if(dataFrame.hasOwnProperty('videoUrl') && dataFrame.videoUrl){
                video = dataFrame.videoUrl.replace("vimeo.com", "player.vimeo.com/video");
                }
            // if (typeof video === 'object' && dataFrame.videoReady) {
                if (dataFrame.videoUrl) {
                o_nativeFullScreen && that.fullScreen && that.cancelFullScreen();

                waitFor(function () {
                    return !fullScreenApi.is() || _activeIndex !== activeIndex;
                }, function () {
                    if (_activeIndex === activeIndex) {
                        dataFrame.$video = dataFrame.$video || $(div(videoClass)).append(createVideoFrame(video));
                        dataFrame.$video.appendTo(dataFrame[STAGE_FRAME_KEY]);

                        $wrap.addClass(wrapVideoClass);
                        $videoPlaying = dataFrame.$video;

                        stageNoMove();

                        $arrs.blur();
                        $fullscreenIcon.blur();

                        triggerEvent('loadvideo');
                    }
                });
            }

            return this;
        };


function onStageTap(e, toggleControlsFLAG) {
            var target = e.target,
                $target = $(target);
            // if ($target.hasClass(videoPlayClass)) {
            if ($target.hasClass('fotorama-video-container')) {
                that.playVideo();
            } else if (target === fullscreenIcon) {
                that.toggleFullScreen();
            } else if ($videoPlaying) {
                target === videoClose && unloadVideo($videoPlaying, true, true);
            } else if (!$fotorama.hasClass(fullscreenClass)) {
                that.requestFullScreen();
            }
        }