Title for iframe/video in magnific popup

Question

I need to show title/caption for video popup. In image type there is option for this, but none for video/iframe.

In docs (http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe_type) I found example of templating markup but I don't understand how to make title visible.

Would you please help me to setup iframe markup to show title in popup window from link like

<a class="popup" title="This is caption" href="http://vimeo.com/41128754"></a>

JS code

    $('a.popup').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: true,
        titleSrc: 'title'

    });

Thank you.

Answer 1

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/