How to add multiple videos on fotorama gallery in Magento2?

Question

I have to add multiple videos for each product on fotorama gallery. I am using this code, and it is working fine for a single video.

<script>
require(['jquery'],  function($) {
$(document).on('gallery:loaded', function () {
    var $fotorama = jQuery('div.gallery-placeholder > div.fotorama');
    var fotorama = $fotorama.data('fotorama');
    var video = '<?php echo $video_set[$i]; ?>';
    $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: 'http://127.0.0.1/Magentonew/pub/media/file-MrylO8jADD.png', 'src': video, type: 'iframe',caption: 'SET CAPTION',class: 'prod-video' });
});
});
</script>

The problem is only last video is playing when click on thumb image. other videos are showing only its thumb image.

Can anyone please help me to fix this issue. Thanks in advance..

Answer 1

I found the answer by myself. I added videos like this, and it is working fine..

fotorama.push({ thumb: 'http://127.0.0.1/Magentonew/pub/media/file-MrylO8jADD11.png', 'src': video1, type: 'iframe',caption: 'SET CAPTION' },{ thumb: 'http://127.0.0.1/Magentonew/pub/media/file-MrylO8jADD11.png', 'src': video2, type: 'iframe',caption: 'SET CAPTION' },{ thumb: 'http://127.0.0.1/Magentonew/pub/media/file-MrylO8jADD11.png', 'src': video3, type: 'iframe',caption: 'SET CAPTION' },{ thumb: 'http://127.0.0.1/Magentonew/pub/media/file-MrylO8jADD11.png', 'src': video4, type: 'iframe',caption: 'SET CAPTION' });

Answer 2

I have problem. After video loading 1-2 second, It's stop and show charactor same image . Help me please. Thank you