0

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. enter image description here

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

0

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' });
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.