How to Add Custom Product Video in Fotorama Gallery?

(5 votes, average: 4.60 out of 5)

Loading...

Adding a product video simply increases the user experience in an online store. Using Fotorama gallery is one of the easiest ways to programmatically add custom product video in Magento 2. Fotorama is used to display product images on the product page, but it does not offer the facility to display video in the gallery. You need to programmatically add the video.

This tutorial will explain to you how to add custom product video in fotorama gallery. With the help of the following steps, add custom product video in product from the local storage seamlessly.

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

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

Add this code in the js file or in phtml file inside <script> tag.

Thereafter, set your thumbnail image path in the thumb param. In src param, set your video URL and at last, in caption param, to set your caption.

2) At last, Clean cache with the help of command mentioned below:

php bin/magento c:c

Here you go.

Add custom product video in fotorama gallery just with 2 steps. We hope this proves to be a perfect guide for your Magento 2 store. If there is anything missed by us or if you face any problem during this implementation, we would be glad to help.