在popific弹出窗口中iframe/video的标题

Question

我需要显示视频弹出的标题/标题.在图片类型中,有此选项,但视频/ iframe没有选项.

在docs(http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe_type)中,我找到了模板标记的例子,但我不明白如何使标题可见.

你能不能帮我设置iframe标记,从链接中显示弹出窗口中的标题

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

JS代码

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

    });

谢谢.

Answer 1

有点晚了,但对于寻找答案的其他人来说可能会有所帮助.

"titleSrc"属性仅适用于type:image,它不适用于iframe.Magnific Popup的开发人员有一个如何在iframe弹出窗口中添加标题的示例:http://codepen.io/dimsemenov/pen/zjtbr

这是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
});

要显示标题,您必须包含此CSS:

.mfp-title {
  position:absolute;
  /* other formatting */
}

这是做什么的:

• markup正在向帧包装器添加一个带有类mfp-title的新div ,它将用于显示标题.
• 该markupParse回调会从该链接的title属性(如果有),并将其添加到新的div.
• 这会将标题添加到视频的底部,无论包含.mfp-title div的位置如何,因为它使用绝对定位.您需要使用CSS将其定位在顶部,例如top: -20px; left:0;(您需要顶部的负值才能将其移动到iframe上方)

.

开发人员在这里有一组示例,可以帮助任何人寻找如何做文档中未涉及的事情. http://codepen.io/collection/nLcqo/

Answer 2

对于 iFrame，您必须使用 vimeo 嵌入代码。在我的项目中我使用了以下一个。可能它对你有用。如果您对此有任何疑问，请告诉我。

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