HTML-YouTube Video einbetten in Webseite

Drummer77 · 14.11.2023

Hallo Zusammen,
ich bin hier neu und habe sehr wenig HTML-Kenntnisse. Für eine Bekannte würde ich gerne auf Ihrer Seite unter "Gallery" ein selbst erstelltes Video einfügen.
Was ich bisher weiß ist, dass man auf dem YouTube Kanal den SRC-Code kopieren kann. Jedoch fängt meine Unerfahrenheit genau hier an .... Ich habe versucht den SRC-Code zu kopieren und habe dazu eine HTML-Datei erstellt, welche ich dann trocken auf der Webspace Seite (in diesem Fall IONOS) unter "Gallery" dann eingefügt habe. Ergebnis: Video erscheint dort nicht. Es soll direkt unterhalb von Gallery erscheinen (erst einmal unwichtig, dass es unter "Video" in der Gallery erscheint oder nicht).
Kann mir jemanden dabei helfen bitte?
Muss hierzu vielleicht einen separaten Ordner ("Video" könnte man dann nehmen) > eine HTML-Code (mit einer HTML-Datei natürlich) + das Video mit (z.B.) mit der Endung "mp.4" hinzufügen?

Besten Dank im Voraus für jede Hilfe.

Engin

Sempervivum · 14.11.2023

Hallo Engin und willkommen im Forum!
Was meinst Du denn mit SRC-Code?
Am einfachsten geht das Einbetten, wenn Du rechts unter dem Video auf "Teilen" klickst und dann "Einbetten" wählst. Dann bekommst du einen HTML-Code, den Du in der Seite einfügen kannst, dort wo das Video angezeigt werden soll.

Drummer77 · 14.11.2023

Hallo und danke erst einmal.
Bis dahin kam ich auch schon. Was genau mache ich denn dann ab diesem Punkt. Also: HTML-Code habe ich (das meinte ich übrigens mit SRC-Code auch zugleich). Muss ich diesen in eine neu erstellte HTML-Datei einfügen und auf der Seite hochladen? Das habe ich bereits auch gemacht. Jedoch leider ohne Erfolg. Das Video erscheint nicht du.
Ich habe den HTML Code in jeweils zwei (zum Testen) neu erstellte Dateien ( "Video.html" und auch als "Video.mp4) und den Inhalt dann auch jeweils mit dem HTML-Code von dem Video hochgeladen.
VG.
Engin

Sempervivum · 14.11.2023

Dem Screenshot des Dateisystems nach handelt es sich um Wordpress. In dem Fall kann ich dir nicht wirklich helfen. Häufig gibt es in einem CMS eine Möglichkeit ein Widget einzufügen wo man HTML-Code rein kopieren kann.

Drummer77 · 14.11.2023

Danke dennoch an dich. Eventuell kann ja jemand anders helfen.
Übrigens handelt es sich hierbei (habe ich soeben erfahren) NICHT um Wordpress.
VG.
Engin

scatello · 14.11.2023

Damit solltest du weiterkommen: https://www.google.de/search?q=video+in+wordpress+einbinden

Drummer77 · 14.11.2023

Hi. Danke. Jedoch (wie zuvor erwähnt) handelt es sich nicht um Wordpress.
Danke und Gruß.
Engin

Sempervivum · 14.11.2023

Wie wird die Seite denn dann erstellt? Von Grund auf mit HTML und CSS?

Ich habe versucht den SRC-Code zu kopieren und habe dazu eine HTML-Datei erstellt, welche ich dann trocken auf der Webspace Seite (in diesem Fall IONOS) unter "Gallery" dann eingefügt habe. Ergebnis: Video erscheint dort nicht.

Das sollte eigentlich funktionieren. Wenn nicht, stelle es noch Mal online und poste die URL.
Hast Du auch das HTML-Grundgerüst verwendet?
https://wiki.selfhtml.org/wiki/HTML/Tutorials/Grundgerüst
Gleich am Anfang die Kopiervorlage.

Drummer77 · 14.11.2023

Danke sehr.
Hier die URL: rockitbird.com
Die Seite sollte von Grund auf per HTML (CSS also nicht).

Hier nochmal der Inhalt der HTML-Datei (fett markiert ist der YouTube-Code:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel</title>
</head>
<body>
<iframe width="560" height="315" src="

" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</body>
</html>

An die Stelle unterhalb von "Gallery" (zusätzlich unter "Videos") habe ich nun nochmal das Grundgerüst + den YouTube-Code hochgeladen (leider kein Erfolg nach wie vor):

2023-11-14 22_16_11-IONOS - Webspace Explorer.png

Vielen Dank.

Sempervivum · 14.11.2023

Das funktioniert schon Mal wenn ich diese URL aufrufen:
https://rockitbird.com/Rockitbird_7.2_2020_Gallery/VideoEvent.html
Das Video wird angezeigt und abgespielt.

Sempervivum · 14.11.2023

PS: Auch hier:
https://rockitbird.com/Rockitbird_7.2_2020_Gallery/Gallery.html
wird das Video ganz unten angezeigt.

Drummer77 · 14.11.2023

Hallo. Danke dir. Interessant ist, dass es seit eben unten sichtbar ist. Zuvor konnte ich kein Video sehen. Wie auch immer.

Das sollte erst einmal reichen und vermutlich hat es etwas mit dem Grundgerüst zu tun, welches ich nun mit hochgeladen habe.

Vielen lieben Dank!!!

Beste Grüße.
Engin

Drummer77 · 14.11.2023

Letzte Frage: Wie würde ich nun das Video unter die Bilder quasi bekommen bitte?

Außerdem scheint die URL unterschiedlich zu sein.

Wenn man direkt auf die Seite geht und dann auf Galerie, so erhält man folgenden Pfad: rockitbird.com/gallery-photos.html (wo kein Video ist logischerweise)

Wenn man jedoch den direkten (also wie zuvor / oben) Link "rockitbird.com/Rockitbird_7.2_2020_Gallery/Gallery.html" nimmt, dann geht es. Woran kann das liegen?

Besten Dank im Voraus.

Gruß.
Engin

Sempervivum · 14.11.2023

Du brauchst den Container mit dem Video (blauer Pfeil) nur hinter das div mit der ID "photos" zu verschieben (grüner Pfeil zeigt auf die Position).

Drummer77 · 14.11.2023

Besten Dank für den Code zuvor.

Ich denke, dass die URL im Code direkt hinter "<h2> angepasst werden müsste, damit folgende URL mit dem Video dann angezeigt werden kann?:

rockitbird.com/gallery-photos.html (hier sollte es erscheinen) ....

... und nicht hier: rockitbird.com/Rockitbird_7.2_2020_Gallery/VideoEvent.html (ist mir später aufgefallen >>> Verzeihung)

Vielen Dank!

Engin

Sempervivum · 14.11.2023

Was ich in Posting #14 geschrieben habe war Käse, ich untersuche das noch, Moment ...

Sempervivum · 14.11.2023

In diesem div.videos-gallery#videos waren nicht nur die Videos sondern auch die Social Buttons. Ich bezweifle, dass das seine Richtigkeit hat.
Um erst Mal das Video an die richtige Position zu bekommen habe ich die Struktur mit dem Seiteninspektor so eingerichtet:

D. h. das h2-Tag sofort geschlossen, dahinter die Fotos und dann das Video.
Damit wird das Video hinter den Fotos angezeigt. Für die Feinheiten kann ich noch nicht garantieren: Ich vermute, dass mit den Buttons PHOTOS und VIDEOS umgeschaltet werden soll, so dass immer nur eines sichtbar ist - das funktioniert noch nicht.

Drummer77 · 14.11.2023

Danke dir sehr für deine Hilfe. Muss ich mal alles morgen abschreiben und testen.

Das mit dem Umschalten zwischen Videos und Photos KANN, MUSS aber nicht. Es wäre natürlich das Beste.

Hast du bezüglich der URL (Post 15) vielleicht noch eine Idee?

Vielen Dank.
Engin

Sempervivum · 14.11.2023

Posting #15 verstehe ich nicht richtig. Ich verstehe dein Vorhaben so, dass Du das Video direkt auf https://rockitbird.com/gallery-photos.html hinter den Fotos anzeigen willst. Das tut die Anordnung in #17.
Oder willst Du statt dessen eine Link habe wo man drauf klickt und nach rockitbird.com/gallery-photos.html (hier sollte es erscheinen) gelangt?
Mit dem eingebetteten Video finde ich viel schöner.

Drummer77 · 15.11.2023

Die Sache ist folgende.
Ziel ist, dass man die URL "rockitbird.com/gallery-photos.html" aufruft und dort das entsprechende Video "eingebettet" sieht in Gallery.
Jedoch nicht, wenn man die URL "rockitbird.com/Rockitbird_7.2_2020_Gallery/Gallery.html" aufruft.

Denn wenn man über die Home-Seite (rockitbird.com/index.html >>> also die eigentliche Seite) geht und dann auf die Rubrik "Gallery" klick, so erscheint die URL "rockitbird.com/gallery-photos.html", welche richtig ist, jedoch hier logischerweise das eingebettete Video nicht auftaucht. "rockitbird.com/Rockitbird_7.2_2020_Gallery/Gallery.html" dagegen ist also vom Pfad her nicht richtig, jedoch taucht das Video hier auf. Dies ist also nicht gewollt. Dies ist mir aber leider später aufgefallen.
Besten Dank.
VG.

Engin