12

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.

Arkady
  • 347
  • 1
  • 2
  • 11
  • Here id discussion that answers your question http://stackoverflow.com/questions/20986219/adding-some-text-below-the-video-popup – Dmitry Semenov Jan 08 '14 at 09:03

2 Answers2

18

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/

FluffyKitten
  • 12,639
  • 10
  • 31
  • 45
0

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>
Rigel Networks
  • 4,766
  • 2
  • 22
  • 41