Magento 2 add custom product video in fotorama gallery

Posted on 25 May, 2019

Magento 2 provides a gallery on the product page for showing the product images. But it does not provide the feature to show the video in that gallery except the video is hosted on Vimeo or YouTube. So this technical note will help you to add custom video in fotorama gallery direct from your local storage.

Currently, it is quite difficult to make customizations in the fotorama. As the title mentioned, we'll explain how to add custom video in fotorama easily in Magento 2. So, let's start the journey of fotorama.

Step 1: First, choose the JAVASCRIPT file or else you can also choose any PHTML file for adding the below code. But make sure this file gets executed on the product page.

There are multiple ways to add the below code. Let's start by overriding the gallery.phtml file in the theme.

If you are not familiar with the custom theme, I would request you to read the documentation of how to create a custom theme in magento 2.

Step 2: First, override the gallery.phtml in the following directory [MagentoRoot]\app\design\frontend\[vendor_name]\[theme_name]\Magento_Catalog\templates\product\view and copy the below code in your file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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 THE THUMB IMAGE PATH', 'src': 'SET THE VIDEO URL', type: 'iframe',caption: 'SET CAPTION' });
    });
});
</script>

You now need to just add this code in your JAVASCRIPT file or else in the PHTML file with the <script> tag.

  •  For setting the video thumbnail image, you need to replace the text SET THE THUMB IMAGE PATH with the thumbnail image URL path.
  • For setting the video URL, you need to replace the text SET THE VIDEO URL with the video URL.

Step 3: Now, you need to run the below command in your command prompt to refresh the cache.

php bin/magento cache:clean
php bin/magento cache:flush

That's it.

I hope this documentation has assisted you to fulfill your requirements for adding the custom video in fotorama. Please do comment below if you have any queries or concern regarding this documentation. I will be glad to assist you.

Thank you.


Dharmik Ponda , eCommerce Engineer

Magento Technical Notes

About Emipro

Being an emerging leader in IT market since 2011, Emipro Technologies Pvt. Ltd. has been providing a wide range of business solutions in Odoo & Magento. We are pleased to have a large pool of contented customers with our meticulous work in the domain of ERP & e-Commerce. Our customers are companies of all sizes ranging from startups to large enterprises who realize that they need a professional internet solution to generate revenue streams, establish proper communication channels, to achieve desired goals and streamline business operations. [....] Read More

Our writings seems informative ?

Subscribe for our Magento Technical Notes and get more amazing stuff directly to your inbox!

Post Your Review

X

Your Review has been posted

0 Comment(s)