Video starten von youtube mit html und geändertem Vorschaubild 
Autor: Ukraine.report .Ich habe im folgenden Link das Problem dargestellt.
Der Einfachkeit halber habe ich die zwei HTML Felder nebeneinander gestellt
https://ukrainedaily.net/chruschtschow.html
der Code vom Ersten lautet:
<p id="inner" onclick="changeText()"><img src="bilderYT/1.jpg" width="100%" height="210"></p>
<script>function changeText(){document.getElementById("inner").innerHTML = "<iframe width='100%' height='210' src='https://www.youtube.com/embed/0j1awlWTDKY?start=164&end=236&autoplay=1' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' allowfullscreen></iframe";}</script>
der Code vom Zweiten lautet:
<p id="inner" onclick="changeText()"><img src="bilderYT/2.jpg" width="100%" height="210"></p>
<script>function changeText(){document.getElementById("inner").innerHTML = "<iframe width='100%' height='210' src='https://www.youtube.com/embed/0j1awlWTDKY?start=12&end=164&autoplay=1' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' allowfullscreen></iframe";}</script>
Das Problem ist:
Wenn ich auf das Erste klicke spielt er Stalins Geburtstagsfeier ab - obwohl es laut Zeitangaben bei der 164 Sekunde starten sollte und nicht bei der 12 Sekunde.
Es wurde irgendwie der Startpunkt vom linken Ersten Video vom Startpunkt des 2.Videos genommen :(
Das Zweite lässt sich garnicht starten - sondern läuft im lenken Ersten ab.
Etwas Tricky die Sache :(
lg Andre
Es müssen unterschiedliche IDs vergeben werden, getestet habe ich es noch nicht mit 2 Videos.
Also nicht 2 mal "inner" verwenden ...
<p id="inner"
<p id="inner"
... sondern ....
<p id="inner1"
document.getElementById("inner1").innerHTML =
... und ...
<p id="inner2"
document.getElementById("inner2").innerHTML =
... damit jedes Vorschaubild dem richtigen Video zugeordnet wird.
Autor
ah das klingt gut :) danke werde ich moren probieren :) lg Andre
Autor
Macht dennoch Probleme - was soll ich noch ändern ?
https://ukrainedaily.net/chruschtschow.html
Code linkes Video:
<p id="inner1" onclick="changeText()"><img src="bilderYT/1.jpg" width="100%" height="210"></p>
<script>function changeText(){document.getElementById("inner1").innerHTML = "<iframe width='100%' height='210' src='https://www.youtube.com/embed/0j1awlWTDKY?start=164&end=236&autoplay=1' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' allowfullscreen></iframe";}</script>
Code rechtes Video
<p id="inner2" onclick="changeText()"><img src="bilderYT/2.jpg" width="100%" height="210"></p>
<script>function changeText(){document.getElementById("inner2").innerHTML = "<iframe width='100%' height='210' src='https://www.youtube.com/embed/0j1awlWTDKY?start=12&end=164&autoplay=1' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' allowfullscreen></iframe";}</script>
lg Andre
Ok - dann werde ich mal Tests machen und wenn ich die Lösung habe, dann melde ich mich hier.
So - es müssen an 4 Stellen Anpassungen gemacht werden, siehe fett markierte Stellen.
----- Video 1 -----
<p id="inner1" onclick="changeText1()">
function changeText1(){
document.getElementById("inner1").innerHTML =
----- Video 2 -----
<p id="inner2" onclick="changeText2()">
function changeText2(){
document.getElementById("inner2").innerHTML =
-----
Auf meiner Testseite habe ich den Code und die Anleitung geändert, es funktioniert mit 2 Videos.
>> http://finde-links.de/123test-modeshop/youtube-iframe.html
Autor
lg Andre
Ich bin kein Javascript-Experte - aber so wie ich das sehe, müssen die beiden IDs...
id="..."
document.getElementById("...")
... sowie Klickfunktion und Funktionsaufruf ...
onclick="...()"
function ...()
... jeweils die gleichen Namen haben.
Und wenn der Code mehrmals auf der Seite ist, dann sollten die variablen Angaben bei ... des einen Codes nicht im anderen Code auftauchen, damit nicht ein <script> das anderen <script> stört.
Ist ist sinnvoll im Javascript-Code den Angaben bei ... verständliche Namen zu geben, damit später noch nachvollziehbar ist was das Javascript macht.
Beispiel der Funktion des Codes in normaler Sprache:
Ersetze inner(halb) vom P-Tag mit der Funktion changetext den einen HTML-Code (mit dem Bild) durch einen anderen HTML-Code (mit dem YouTube-Video).
Autor
verstanden :) lg Andre