如何在工具提示中嵌入 YouTube 视频？

Posted 2023-05-09

【中文标题】如何在工具提示中嵌入 YouTube 视频？

【英文标题】：How do I embed a YouTube video inside of a tooltip?

【发布时间】：2017-08-01 04:26:27

【问题描述】：

我正在尝试使用 MaterializeCSS 工具提示来显示 youtube 视频。我已将 jQuery 中的 html 属性设置为“true”，并将嵌入的 iframe 代码添加到 HTML 中的 data-tooltip 属性中。

我遇到了 html iframe 代码中的引号问题，它们阻止了标签关闭。我尝试使用 &quot 语法转义引号，但所做的只是显示 html 文本，而不是在工具提示中实际运行代码。我已经尝试过在内部使用双引号的单引号，并且只显示一个小的薄空白框。我假设这意味着 html 正在运行但不显示任何内容。有谁知道问题出在哪里？

jQuery

$('.test-tooltip').tooltip(
            delay: 50,
            html: true,
        );

HTML

<a class="test-tooltip" data-tooltip="<iframe   src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>" 

【问题讨论】：

@FarzinKanzi 因为 HTML title 属性只允许文本内容？

我认为标题是 Bootstrap API 的一部分，对吗？根据 Materialize 文档，我应该将 html 放在 jQuery 的 tooltip 属性中，但这似乎没有运行。

在父双引号内使用单引号即可。

当您将鼠标从工具提示上移开时，工具提示和视频一样消失。你最好使用popovers来达到这个效果。以这种方式使用 Tooltip 对用户来说是一个糟糕的用户体验。

【参考方案1】：

您可以添加另一个 div 或元素作为视频容器，并将其添加到弹出框作为 jQuery 函数的返回。

jQuery:

 $('.test-tooltip').popover(
   delay: 50, 
    html : true,
    content: $('#youtube_container')
    
  );

HTML：

<a class='test-tooltip' data-placement='top' title="Title" href='#'>Click</a>
<div id="youtube_container" style="display: none">
    <iframe   src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

它应该可以工作。

【讨论】：

这可能是正确的想法，但执行起来并不完全正确。 display:none 需要切换或正常工作。当我删除 display:none 时，youtube 视频会出现在页面上，当我点击“点击”时，视频将出现在工具提示中。只是需要更多的调整才能使其工作。同样，我相信这是正确的方法。