Magento 2: Product video not working on frontend

Question

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.

Answer 1

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;
    }