Question 6364 in Magento Question posted in
The official documentation can be found here.

Product video not playing on frontend – Magento

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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

    I have changed the functions createVideoFrame, 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();
            }
        }

function createVideoFrame(videoItem) {
        // var frame = '<iframe src="' + videoItem.p + videoItem.type + '.com/embed/' + videoItem.id + '" frameborder="0" allowfullscreen></iframe>';
        var frame = '<iframe src="' + videoItem + '" frameborder="0" allowfullscreen></iframe>';
        return frame;
    }

  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search