Clicking on color swatch, images are not loading on product listing page in magento 2.3.3

Question

I have added color swatches for my Configurable products. On product detail page when we click on color swatches the product images gets changed properly. But this does not work fine on category pages. When i click on color swatch, the images does not load. https://prnt.sc/10gzh73

And it is showing following error on console.

Uncaught TypeError: $(...).AddFotoramaVideoEvents is not a function
    at $.<computed>.<computed>.updateBaseImage (swatch-renderer.js:1254)
    at $.<computed>.<computed>.updateBaseImage (widget.js:100)
    at $.<computed>.<computed>._ProductMediaCallback (swatch-renderer.js:1173)
    at $.<computed>.<computed>._ProductMediaCallback (widget.js:100)
    at Object.mediaSuccessCallback [as success] (swatch-renderer.js:1074)
    at fire (jquery.js:3238)
    at Object.fireWith [as resolveWith] (jquery.js:3368)
    at done (jquery.js:9846)
    at XMLHttpRequest.callback (jquery.js:10317)

Answer 1

First, check Magento_ProductVideo enable or not? If not enabled then try enabling it. After this, if this issue is not solved then here is a temporary fix for this. You need to override the swatch-renderer.js file.
Path: Magento_Swatches/view/base/web/js/swatch-renderer.js
Override the above file at your theme path and make the below change in code.

Replace this code

if (isInitial) {
   $(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
}

With this one

if (isInitial) {
    if ($.isFunction($(this.options.mediaGallerySelector).AddFotoramaVideoEvents)) {
        $(this.options.mediaGallerySelector).AddFotoramaVideoEvents();
    } 
}