Video - Webflow hjälp

Last updated on 10/22/2025@mrbirddev
Video - Webflow hjälp
Använd videoelementet för att bädda in videor som finns på tredjepartswebbplatser som YouTube eller Vimeo.

Videoelementet låter dig bädda in en video, som finns på en tredjepartswebbplats som YouTube eller Vimeo, var som helst på din webbplats.

Hur man lägger till en video

Det finns två sätt att lägga till ett videoelement på din webbplats:

  • Öppna Lägg till-panelen och dra och släpp ett video element på din Webflow-canvas
  • Tryck på Kommando + E (på Mac) eller Control + E (på Windows) för att öppna Snabbsök och sök efter video elementet

Hur man formaterar videoinställningar

När du har placerat ett videoelement på din canvas får du tillgång till Videoinställningar där du kan lägga till en URL och titel. För att snabbt komma åt Videoinställningar:

  • Dubbelklicka på video elementet
  • Välj video elementet och gå till Elementinställningar-panelen (D)

Klistra in din video URL, lägg till en titel om du vill, och tryck på Enter / Return. Miniatyrbilden för din video kommer att visas i videoelementet.

Stödda videokällor

  • YouTube (om du vill ha mer kontroll över din YouTube-video, prova att använda ett YouTube videoelement)
  • Vimeo
  • DailyMotion
  • KickStarter (allt du behöver göra är att klistra in huvudkampanjens URL och Webflow kommer att hämta huvudkampanjens video)
  • TED (flerspråkigt stöd)
  • Wistia
  • Ustream
  • Livestream
  • Twitch
  • Tudou
  • Hulu
  • SproutVideo
  • Vidzflow
För närvarande stöder vi inte uppladdning av videofiler till Resurspanelen och använda dem i videoelementet. Du kan dock ladda upp videor som tysta bakgrundsvideor.

Hur man ställer in videodimensioner

Videoelementet respekterar dimensionerna av sin föräldrakontainer (t.ex. om du placerar det i ett div-block, kommer det att ta upp hela bredden av det div-blocket). Om du vill ställa in en anpassad bredd och höjd för din video kan du skapa ett anpassat div-block. För att göra det, dra in ett div-block från Lägg till-panelen och ge div-blocket ett breddvärde och ett höjdvärde. Nu, om du drar din video in i detta anpassade div-block, kommer det att anpassa sig till den storleken.

Andra sätt att lägga till videor på din webbplats

Du kan också lägga till videor på din webbplats genom att använda andra element, inklusive:

  • YouTube-video
  • Bakgrundsvideo
  • Lightbox
  • Rik text
  • Anpassad kodinbäddning

YouTube-videoelement

YouTube-videoelementet låter dig bädda in en video från en YouTube-URL. Detta element ger dig alla visningsalternativ som erbjuds av YouTubes inbäddningsfunktion, inklusive möjligheten att visa relaterade videor från en kanal, ställa in en specifik starttid, visa eller dölja videokontroller och mer. Läs mer om YouTube-videoelementet.

Bakgrundsvideoelement

Bakgrundsvideoelementet låter dig lägga till rörliga bakgrunder utan ljud. Till skillnad från videoelementet som endast stöder YouTube- och Vimeo-länkar, kan bakgrundsvideoelementet acceptera vilken videofil som helst som du laddar upp. Bakgrundsvideoelement kommer också med en inbyggd spela/pausa-knapp så att besökare kan spela eller pausa bakgrundsvideon som de önskar. Läs mer om bakgrundsvideoelementet.

Elementet lightbox låter besökare öppna en video i en popup-modal. Precis som videoelementet stöder lightbox YouTube- och Vimeo-länkar. Läs mer om lightbox-elementet.

Rich text-element och rich text-fält

Rich text-elementet låter dig också lägga till videor. Detta är ännu mer kraftfullt när du använder det för att hämta data från ett rich text-fält i en CMS Collection. Alternativt kan du också använda ett video-element för att dynamiskt hämta data från en Collections videofält. Läs mer om Collection-videofält.

Hur man bäddar in videor med anpassad kod

Du kan också lägga till HTML-videor med hjälp av embed-elementet:

  1. Gå till Lägg till-panelen
  2. Dra ett embed-element till arbetsytan
  3. Klistra in din videokod (Läs mer om videoelement i HTML)
  4. Klicka på Spara & stäng

Tillbaka till webflow hjälp

Last updated on 10/22/2025@mrbirddev
Recent Articles
Loading...