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.

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: '', 'src': video, type: 'iframe',caption: 'SET CAPTION',class: 'prod-video' });

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

2 Answers 2


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

fotorama.push({ thumb: '', 'src': video1, type: 'iframe',caption: 'SET CAPTION' },{ thumb: '', 'src': video2, type: 'iframe',caption: 'SET CAPTION' },{ thumb: '', 'src': video3, type: 'iframe',caption: 'SET CAPTION' },{ thumb: '', 'src': video4, type: 'iframe',caption: 'SET CAPTION' });

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

enter image description here


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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