Title for iframe/video in magnific popup

问题

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.

回答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/

回答2:

Fo iFrame you have to use vimeo embed code. In my project I used following one. May be its being useful to you. If you have any question regarding to this please let me know.

<iframe height="100" width="100" title="Vimeo Video" class="vimeo" src="http://player.vimeo.com/video/41128754" ></iframe>

来源：https://stackoverflow.com/questions/17612258/title-for-iframe-video-in-magnific-popup

标签

magnific-popup