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

Question

我正在尝试使用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 width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>" 

Answer 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 width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

它应该工作。