Fotorama how to embed an iframe?

Question

Need to add an iframe into the fotorama gallery.

Tab image can be fixed. Src should be a parameter to pass in.

Note this is on Magento 2.0

Answer 1

First get access to the dom element and the api object.

// Get the Dom Element.
var $fotorama = jQuery('div.gallery-placeholder > div.fotorama');

// Get the API object.
var fotorama = $fotorama.data('fotorama');

Listen for the fotorama:load event and replace the contents with an iframe.

// On load handler for fotorama.
$fotorama.on('fotorama:load', function fotorama_onLoad(e, fotorama, extra) {
    if (extra.frame.type === 'iframe') {
        // Replace the contents with the iframe.
        extra.frame.$stageFrame.html('<iframe type="text/html" width="100%" height="100%" src="' + extra.frame.src + '" frameborder="0" scrolling="no" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>');
    }
});

Next up you can push new data for an iframe in like this.

fotorama.push({ img: 'iframe.png', thumb: 'iframe.png', 'src': 'http://someurlforiframe', type: 'iframe' });

Note: You want to have iframe.png or some other image that is thumbnailed sized ready to load in.

I used an 80x80 one.

I was able to successfully embed 3dvieweronline into the gallery using this code from a template in a custom module with working full screen functionality.