So fügen Sie mithilfe von Code Audio- und Videodateien zu Ihrer Homepage-Baukasten-Website hinzu

Neben der Verwendung eines unserer zahlreichen Widgets können Sie im Homepage-Baukasten mithilfe von HTML und der Code-Komponente auch Audio- und Videodateien zu Ihrer Website hinzufügen. In dieser Anleitung erklären wir Ihnen, wie das geht.

• Schritt 1 - Laden Sie die Audio- oder Videodatei auf Ihren Webspace hoch
• Schritt 2 - Homepage-Baukasten öffnen
• Schritt 3 - Fügen Sie den Code in den Homepage-Baukasten ein
• Schritt 4 - Speichern und veröffentlichen

Hinweis: Die Code-Komponente ist eine Funktion des Homepage-Baukastens Premium und Business + E-Commerce. Wenn Sie derzeit Starter nutzen, können Sie Ihr Paket upgraden oder stattdessen das YouTube-Widget verwenden. 

Schritt 1 - Laden Sie die Audio- oder Videodatei auf Ihren Webspace hoch

Laden Sie zunächst Ihre Audio- oder Videodatei über den File Manager oder per FTP auf Ihren Webspace hoch. Audiodateien sollten im MP3-Format und Videodateien im MP4-Format vorliegen.

1. Melden Sie sich im one.com Kontrollpanel an.
2. Öffnen Sie den File Manager unter Hosting-Einstellungen im Menü auf der linken Seite.
3. Klicken Sie auf + Hochladen und wählen Sie die Audio- (mp3) oder Videodatei (mp4) aus, die Sie in Ihre Website einbetten möchten.
4. Kopieren Sie den vollständigen Pfad Ihrer Datei und fügen Sie ihn zur späteren Verwendung in eine Textdatei ein.

Schritt 2 - Homepage-Baukasten öffnen

1. Öffnen Sie den Homepage-Baukasten.
2. Klicken Sie im Komponentenmenü auf der linken Seite auf Widgets.
3. Scrollen Sie nach unten und wählen Sie Code aus.

Schritt 3 - Fügen Sie den Code in den Homepage-Baukasten ein

1. Kopieren Sie eines der folgenden Codebeispiele und fügen Sie es in die Code-Komponente im Homepage-Baukasten ein.
2. Ersetzen Sie „FULL PATH“ im Code-Beispiel durch den vollständigen Pfad zu Ihrer Audio- oder Videodatei.
3. Klicken Sie auf Speichern.

Wählen Sie eines der folgenden Beispiele aus oder erstellen Sie Ihren eigenen Code mit dem HTML <audio> tag und HTML <video> tag. Denken Sie daran, FULL PATH durch den vollständigen Pfad zu Ihrer Audio- oder Videodatei zu ersetzen.

Audio:

Eine MP3-Audiodatei einbetten:

<audio controls>
<source src="FULL PATH" type="audio/mpeg">
</audio>

Eine MP3-Audiodatei einbetten, die automatisch abgespielt wird:

<audio controls autoplay>
<source src="FULL PATH" type="audio/mpeg">
</audio>

Hinweis: Einige Browser schränken die automatische Wiedergabe von Audio- oder Videodateien ein, selbst wenn Sie diese in Ihren Code eingefügt haben.

Video:

Eine MP4-Videodatei einbetten:

<video width="640" height="480" controls>
<source src="FULL PATH" type="video/mp4">
</video>

Eine MP4-Videodatei einbetten, die automatisch abgespielt wird:

<video width="640" height="480" controls autoplay>
<source src="FULL PATH" type="video/mp4">
</video>

Tipp: Die Standardgröße des Videos beträgt 640 x 480 Pixel. Sie können die Größe ändern, indem Sie die Werte für Breite und Höhe im Code anpassen. Sie können das Video auch an den Bildschirm des Betrachters anpassen, indem Sie die Breite auf „100%“ (width="100%") und die Höhe auf „auto“ (height="auto") setzen.

Schritt 4 - Speichern und veröffentlichen

1. Die Komponente wurde nun Ihrem Arbeitsbereich hinzugefügt. Ziehen Sie die Komponente an die Stelle, an der sich die Datei auf Ihrer Website befinden soll.
2. Klicken Sie auf Vorschau, um zu überprüfen, ob das Ergebnis Ihren Vorstellungen entspricht.
3. Wenn alles in Ordnung ist, klicken Sie auf Speichern und Veröffentlichen, damit Ihre Änderungen online sichtbar werden.

Tipp: Fügen Sie Ihrer Website eine Box-Komponente mit denselben Abmessungen wie Ihr Video hinzu und fügen Sie die Code-Komponente in das Feld ein. Dadurch lässt sich die Platzierung des Audio- oder Videomaterials leichter steuern. Die Größe des Videos wird durch die Höhe und Breite im HTML-Code bestimmt.

Verwandte Artikel:

• Wozu kann ich die Container-Komponente nutzen?
• Wie bearbeite ich die mobile Ansicht meiner Homepage-Baukasten-Seite?