div Bild in div Video tauschen

knuddchen

Ich habe ein Script gefunden, womit ich zum Beispiel ein div mit einem Bild in ein anderes div austauschen kann.

Code

<div id=youtubebild><a onclick="tauscheBild(); return false">
<img src="https://i.ytimg.com/vi/SElIILMCIAw/hqdefault.jpg" /><br>Video anzeigen</a></div>


<script>


function tauscheBild(){
var object = document.getElementById("youtubebild");
var austausch = "<iframe style='max-width:100%;' width='560' height='315' src='https://www.youtube.com/embed/SElIILMCIAw' allowfullscreen></iframe>";
object.innerHTML= austausch;
i++;
}


</script>

Alles anzeigen

Das ganze funktioniert auch bei einem Video. Wenn ich ein zweites habe und auf das Bild oder Link klicke, dann tut er das beim ersten ausführen, anstatt beim zweiten. Wie kann ich das ganze so anpassen, dass es dann bei mehreren Videos geht. Würde das ganze gern für den YouTube BB-Code verwenden, damit nicht immer diese ganzen Player geladen werden, was die Ladezeit durch die Bildchen verringert.

bx19

Super Idee, mich ärgern oft die Ladezeiten und glaube nicht das ich damit alleine bin.

Cyperghost

Wenn du dies über den BB-Code machen möchtest, bearbeite lieber die BB-Code class das ist einfacher und es wird weniger an den Browser übertragen.

Des weiteren verwende bitte im WCF die jQuery click Methode

knuddchen

So ich hab das ganze etwas anders gemacht.

Dazu muss man ins ACP->Inhalt->BBCodes->Medienanbieter auflisten und wählt dort YouTube aus.

ersetzt den HTML-Code:

HTML

<iframe style="max-width:100%;" width="560" height="315" src="https://www.youtube.com/embed/{$ID}?wmode=transparent{$start}" allowfullscreen></iframe>

durch:

HTML

<div id="youtubebild{$ID}">
<img src="https://i.ytimg.com/vi/{$ID}/hqdefault.jpg" class="container" style="width:200px;height:auto;" />
<li>
<a onclick="window.open('https://www.youtube.com/embed/{$ID}?wmode=transparent{$start}','_blank','toolbar=no,scrollbars=no,resizable=no,width=560,height=315');" id="youtubebild{$ID}" class="button jsTooltip" title="Video öffnen">
<span class="icon icon16 fa fa-youtube-play"></span>
<span class="invisible">Video öffnen</span>&nbsp;Video öffnen</a>
</li>
</div>

Wollt ihr das ganze dann wieder rückgängig machen, benutzt den iframe code von oben.

Wollt ihr die original Bildgröße ändern, dann so:

HTML

<div id="youtubebild{$ID}">
<img src="https://i.ytimg.com/vi/{$ID}/hqdefault.jpg" class="container" style="width:480px;height:360px;" />
<li>
<a onclick="window.open('https://www.youtube.com/embed/{$ID}?wmode=transparent{$start}','_blank','toolbar=no,scrollbars=no,resizable=no,width=560,height=315');" id="youtubebild{$ID}" class="button jsTooltip" title="Video öffnen">
<span class="icon icon16 fa fa-youtube-play"></span>
<span class="invisible">Video öffnen</span>&nbsp;Video öffnen</a>
</li>
</div>

div Bild in div Video tauschen

Informationen

Über uns