【问题标题】:Title for iframe/video in magnific popup放大弹出窗口中 iframe/视频的标题
【发布时间】:2013-07-12 09:56:43
【问题描述】:

我需要显示视频弹出的标题/说明。在图像类型中有此选项,但对于视频/iframe 则没有。

在文档 (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'

    });

谢谢。

【问题讨论】:

标签: magnific-popup


【解决方案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/

【讨论】:

  • 2021 年仍然为我工作。在 Divi 视频弹出窗口中使用了它。谢谢!
【解决方案2】:

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

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

【讨论】:

  • 感谢您的回复。能否请您提供此 iframe 标记的 JS 代码?
  • 我没有 js 代码,我在我的 iOs 应用程序中使用这个东西作为嵌入代码。如果您需要该代码,请告诉我。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-08-26
  • 1970-01-01
  • 2014-09-30
  • 2016-02-02
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多