Magento 2 : Add Custom Product Video in Fotorama Gallery

In this tutorial, Today I will explain to you how to add custom product video in fotorama gallery programmatically in Magento 2. In Magento 2, There is fotorama js used to show product images on the product page. But, It’s not provide the functionality to show video in the gallery except YouTube video or Vimeo Video.

So, This technical note will help you to add custom product video in product from your local storage. Let’s follow the steps :

You may also like this :

1) First of all, You need to override gallery.phtml file at app/design/frontend/VendorName/ThemeName/Magento_Catalog/templates/product/view/ and paste the below code :

Copy Code


<!--
/**
 * Created By : Rohan Hapani
 */
-->
<script>
    require(['jquery'], function ($) {
        $(document).on('gallery:loaded', function () {
            var $fotorama = jQuery('div.gallery-placeholder > div.fotorama');
            var fotorama = $fotorama.data('fotorama');
            $fotorama.on('fotorama:load', function fotorama_onLoad(e, fotorama, extra) {
                if (extra.frame.type === 'iframe') {
                    extra.frame.$stageFrame.html('<iframe align="middle" type="text/html" width="100%" height="100%" src="' + extra.frame.src + '" frameborder="0" scrolling="no" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>');
                }
            });
            fotorama.push({
                thumb: '<set your thumbnail image path>',
                'src': '<set your video url>',
                type: 'iframe',
                caption: '<set your caption>'
            });
        });
    });
</script>

You need to add this code in your js file or in phtml file inside <script> tag.

In thumb param, you need to set your thumbnail image path. In src param, you need to set your video URL and in last, in caption param you need to set your caption.

2) In Last, You need to clean cache by this below command :

Copy Code

php bin/magento c:c

That’s it.

I hope this blog will helpful for easily understand how to add custom product video in fotorama gallery programmatically in Magento 2. In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with proper solution.

Keep sharing and liking 🙂

Post Views: 5,835