Title for iframe/video in magnific popup

magnific-popup

Solution

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/

Problem

Original source