Wie bette ich ein YouTube-Video in einen Tooltip ein?

Ich versuche den Tooltip von MaterializeCSS zu verwenden, um ein Youtube-Video anzuzeigen. Ich habe das html-Attribut in der jQuery auf "true" gesetzt und den eingebetteten iframe-Code in das data-Tooltip-Attribut im HTML-Code eingefügt.Wie bette ich ein YouTube-Video in einen Tooltip ein?

Ich habe Probleme mit den Anführungszeichen innerhalb des HTML Iframe Codes, sie verhindern, dass die Tags schließen. Ich versuchte, die Anführungszeichen mit der & quot-Syntax zu umgehen, aber alles, was tat, war, den HTML-Text anzuzeigen, anstatt den Code wirklich innerhalb der Werkzeugspitze laufen zu lassen. Ich habe einzelne Anführungszeichen outisde mit doppelten Anführungszeichen auf der Innenseite versucht und das zeigt nur eine kleine dünne leere Box. Ich gehe davon aus, dass das HTML läuft, aber nichts anzeigt. Weiß jemand, was das Problem ist?

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>"

Quelle

2017-03-10 RP12

@FarzinKanzi Da das Attribut HTML 'title' nichts anderes als Textinhalt zulässt? –

Ich denke, Titel ist ein Teil der Bootstrap-API korrekt? Laut den Materialise-Dokumenten sollte ich den HTML-Code in das Tooltip-Attribut in der jQuery einfügen, aber das scheint nicht zu laufen. – RP12

Verwenden Sie einfache Anführungszeichen innerhalb der doppelten Anführungszeichen. –

Sie können ein anderes div oder Element als Video-Container hinzufügen und auf dem popover als Rückkehr einer Funktion jQuery hinzufügen.

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>

Es sollte funktionieren.

Quelle

2017-03-10 18:22:14 Candous

Wie bette ich ein YouTube-Video in einen Tooltip ein?

Antwort

Verwandte Themen