Kostenlose Webflow-Videointegration

So fügen Sie ein Webflow-Video mit benutzerdefinierten Steuerelementen hinzu (gehostet in Webflow)

Wenn Sie ein Marketingteam oder ein Webflow-Builder sind, wer möchte Webflow-Video der sich wie ein echter On-Page-Player verhält (Sound, Playbar, Play/Pause, Lautstärke) ohne externes Hosting, das ist die sauberste Methode, die wir gefunden haben. Sie implementieren eine Webflow-Video mit benutzerdefinierten Steuerelementen Verwenden Sie das eigene Hosting von Webflow für die Datei und dann ein Embed für die Player-Benutzeroberfläche.

Die Background Video-Komponente von Webflow akzeptiert Dateien kleiner als 30 MB, und das ist die wichtigste Einschränkung, innerhalb derer diese Methode funktioniert.

‍

‍

Schritt für Schritt: Webflow-Video mit benutzerdefinierten Steuerelementen

1) Erstellen Sie eine Seite „Videobibliothek“ (private Utility-Seite)

• Erstellen Sie eine neue Seite in Webflow mit dem Namen so etwas wie Videothek.
• Fügen Sie ein Video im Hintergrund Element auf der Seite.
• Laden Sie Ihre MP4-Datei hoch (behalten Sie sie) unter 30 MB).
• Veröffentlichen Sie die Website (oder veröffentlichen Sie sie im Staging), damit die endgültige MP4-URL existiert.

Warum das funktioniert: Hintergrundvideo ist eine der wenigen Möglichkeiten, wie Webflow eine Videodatei direkt für Sie hostet.

‍

2) Holen Sie sich die direkte MP4-URL im Webflow-Designer

Öffnen Sie auf derselben Seite, auf der Sie dies erstellen und das Hintergrundvideo hochladen Video im Hintergrund Einstellungen und Sie sehen einen Pfeil zum Öffnen des Videos in einem Browser. Kopieren Sie einfach diese URL. Diesen Link werden Sie für Ihren benutzerdefinierten Player wiederverwenden.

‍

3) Fügen Sie eine Einbettung hinzu, an der das Webflow-Video erscheinen soll

Auf der Zielseite:

• Lass einen fallen Einbetten Element, in dem das Video leben soll.
• Fügen Sie das unten stehende Snippet ein.
• Ersetzen FÜGE_IHRE_MP4_URL_HIER_EIN mit der URL, die du kopiert hast.

Unten finden Sie den Videoplayer-Code, den wir für Sie vorbereitet haben.

1<div style="position:relative; width:100%; aspect-ratio:16/9; background:#000; cursor:pointer;" onclick="toggleVideo(this)">
2  <video
3    id="vid2"
4    src="PASTE_YOUR_MP4_URL_HERE"
5    preload="metadata"
6    playsinline
7    style="width:100%; height:100%; object-fit:cover; display:block;"
8  ></video>
9
10  <div id="btn2" style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none;">
11    <div style="width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center;">
12      <svg id="icon2" width="24" height="24" viewBox="0 0 24 24" fill="#000">
13        <polygon points="6,4 20,12 6,20"/>
14      </svg>
15    </div>
16  </div>
17</div>
18
19<script>
20function toggleVideo(wrap) {
21  const vid = wrap.querySelector('video');
22  const btn = wrap.querySelector('[id^="btn2"]');
23  const icon = wrap.querySelector('[id^="icon2"]');
24
25  if (vid.paused) {
26    vid.play();
27    btn.style.opacity = '0';
28    icon.innerHTML = '<rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>';
29  } else {
30    vid.pause();
31    btn.style.opacity = '1';
32    icon.innerHTML = '<polygon points="6,4 20,12 6,20"/>';
33  }
34}
35</script>

‍

4) Mach es schnell: folge einem einfachen „Videobudget“

Webvideos wirken sich auf das Nutzererlebnis und die Suchleistung aus. Google empfiehlt starke Core Web Vitals-Ziele (z. B. LCP innerhalb von 2,5 Sekunden).

‍

5) Dieselbe gehostete Datei seitenübergreifend wiederverwenden (saubere Skalierung)

Sobald Sie eine stabile MP4-URL haben, können Sie sie in mehreren Einbettungen wiederverwenden (gleich Webflow-Video, verschiedene Platzierungen). Wenn Sie mehrere Videos benötigen, wiederholen Sie den Upload-Schritt „Videobibliothek“ pro Datei und verwenden Sie dann bei Bedarf die URL der einzelnen Dateien.

Wenn du eine größere Website erstellst, auf der Videos Teil des Konversionsflusses sind (Landingpages, Produktseiten, Fallstudien), passt das gut zu einem breiteren Performance-/SEO-Setup wie strukturierten Inhaltsblöcken und internen Links.