A bit late, but it may be helpful to anyone else looking for the answer.
The "titleSrc" attribute only applies to type: image, it doesn't work for iframes.
The developer of Magnific Popup has an example of how to add a title to an iframe popup here: http://codepen.io/dimsemenov/pen/zjtbr
This is the JS:
$('.popup').magnificPopup({
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-title">Some caption</div>'+
'</div>'
},
callbacks: {
markupParse: function(template, values, item) {
values.title = item.el.attr('title');
}
},
// your other settings
});
To make the title appear, you must include this CSS:
.mfp-title {
position:absolute;
/* other formatting */
}
What this is doing:
markup
is adding a new div with class mfp-title to the frame wrapper, that will be used to display the caption.
- The
markupParse
callback gets the title attribute from the link if there is one, and adds it to the new div.
- That this adds the title to the bottom of the video, regardless of where the .mfp-title div is included, as it uses absolute positioning. You need to use CSS to position it at the top, e.g.
top: -20px; left:0;
(you'll need a negative value for the top to move it above the iframe)
.
The developer has a collection of examples here that might help anyone looking for how to do things not covered in the documentation.
http://codepen.io/collection/nLcqo/