Bhaveshpp

Professional Magento Developr - Healp eachother to grow

How to add video in magento 2 photorama js

23 May 2021 » magento2, javascript

Photorama Add video (phtml)

<script type="text/javascript">
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>');
            }
        });
        <?php
        $_product = $block->getProduct();
        $videos = array($_product->getData('youtube1'),$_product->getData('youtube2'),$_product->getData('youtube3'));
        foreach ($videos as $video) {
            if (!empty($video)) {        
                ?>
                fotorama.push({ thumb: '<?= "https://img.youtube.com/vi/". $video ."/1.jpg"?>', 'src': '<?= "https://youtube.com/embed/".$video?>', type: 'iframe',caption: 'video' });
                <?php
            }
        }?>
    });
});
</script>