YouTube動画をツールチップの中に埋め込むにはどうすればよいですか？

Question

私はYouTubeビデオを表示するためにoderでMaterializeCSSのツールチップを使用しようとしています。私はjQueryのhtml属性を 'true'に設定し、埋め込まれたiframeコードをHTMLのdata-tooltip属性に追加しました。

html iframeコード内の引用符に問題があり、タグが閉じられないようにしています。私は&構文で引用符をエスケープしようとしましたが、実際にはツールチップの中でコードを実行する代わりに、htmlテキストが表示されていました。私は内側に二重引用符で一重引用符outisdeしようとしたが、それは小さな薄いブランクボックスを示しています。私は、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> 

それが動作するはずです。