Caption for an iframe element?

[mobweb]

Has anybody gotten a caption on an iframe element to work?

I have tried various codes that I found here, even one by @dimsemenov (https://github.com/dimsemenov/Magnific-Popup/issues/262), but none seem to work.

Here's my code which is based on the issue linked above:

jQuery(document).ready(function() {
    var url = 'http://google.com';
    var title= 'test';

    $.magnificPopup.open({
        items: { src: url },
        type: 'iframe',
        markup: '<div class="mfp-iframe-scaler">'+
        '<div class="mfp-close"></div>'+
        '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
        '<div class="mfp-bottom-bar">'+
        '<div class="mfp-title"></div>'+
        '</div>'+
        '</div>',
        titleSrc: function(item) {
            return title;
        },
    });
});

[navtsi]

Is there a solution for this? Need caption for video too.

[petertwise]

Here's how I ended up doing this to get it working with iframe in a gallery context:

$('.playlist-container').each(function() { // the containers for all your galleries
	$(this).magnificPopup({
		delegate: 'a', // the selector for gallery item
		type:'iframe',
		iframe: {
			markup: '<div class="mfp-iframe-scaler">'+
				'<div class="mfp-close"></div>'+
				'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
				'<div class="mfp-bottom-bar">'+
					'<div class="mfp-title">...</div>'+
				'</div>'+
			'</div>',
			// add your own patterns and additional settings here...
		},
		gallery: {enabled:true},

		callbacks: {
			// I used the updateStatus callback because it runs when you open and when you click prev or next arrows...
			updateStatus: function(data) {
				var current_title = $(this)[0].currItem.el[0].title; // get the title attr of the link
				setTimeout(function(){
					$('.mfp-title').html(current_title); // change the popup title html
				},200); // had to use a delay here to get this to work... 
			}
		}

	});
});

I'm a little dissapointed to have to use a setTimeout hack, but otherwise I think Magnific is still messing with the HTML in the popup when this gets called. LMK if there's a better way/time to call this.

[mdurchholz]

@squarecandy Why not just include the current_title variable inside your markup?

'<div class="mfp-title">'+$(this).attr('title')+'</div>'+

instead of

'<div class="mfp-title">...</div>'+

This way you don't have to use your setTimeout function.

$('.js_video_popup').each(function() {
    var elem = $(this),
        titl = elem.attr('title'),
        optn = { type : 'iframe' };

    if( titl )
    {
        optn.iframe = { markup: '<div class="mfp-iframe-scaler">'+
                                    '<div class="mfp-close"></div>'+
                                    '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
                                    '<div class="mfp-bottom-bar">'+
                                        '<div class="mfp-title">'+titl+'</div>'+
                                    '</div>'+
                                '</div>'};
    }

    elem.magnificPopup(optn);
});

[petertwise]

@mdurchholz in your example you're calling magnificPopup() for each link, which could be a good way to go for some circumstances. I'm using the delegate feature to create a gallery/group of iframe items. I tried a few things similar to what you did. They all worked for the first item you open, but don't allow the title to change when you click the prev/next arrows.

[petertwise]

You can take a look at the html I'm working with here: https://1beat.org/videos/

• groups of links contained in a <div class="playlist_container"> open up youtube videos in an iframe
• multiple series of these groups appear on the page, each series should be its own gallery; prev/next should not scroll through every item on the whole page
• Title should always appear and should update when you use the prev/next gallery buttons.

[Garconis]

@squarecandy did you ever figure it out?

[petertwise]

Yeah, we are still using https://github.com/dimsemenov/Magnific-Popup/issues/576#issuecomment-352281120 which works.

[petertwise]

Sadly now there is less control over the youtube iframe display so you see the title on the video too. LOL...