Welkom in de betoverende wereld van webontwikkeling en digitale creativiteit. Als webdeveloper of digitale agency komen wij dagelijks in aanraking met video’s. Maar hoe pakken wij dit eigenlijk aan? Dat zal ik je even haarfijn uitleggen.
First of all: Plus of pro
Helaas bestaat deze functie alleen voor mensen met een Vimeo Plus of een Vimeo Pro account. Ben je klant van ons en heb je maar een handjevol video’s? Stuur dan even een berichtje, dan regelen wij alles voor je.
Update: per Juni 2023 heeft vimeo de namen van de plans veranderd. Plus heet nu ‘starter’ en Pro heet nu ‘standard’
Heb je wat meer video’s en is het ook wel handig om deze zelf te kunnen beheren en uploaden? Dan zou ik wel een eigen Plus of Pro account aanraden.
De zoektocht naar de juiste linkjes.
Als je een website bij ons in beheer hebt en je hebt ergens de optie om video toe te voegen, dan zal de input “Vimeo URL” je vast niet onbekend zijn. Wellicht heb je intuïtief al gedacht om hier de Vimeo share URL in te mikken. Goed gedacht! Maar dat gaat helaas niet werken.
Bij Plus en Pro accounts genereert Vimeo een verzameling van “Distribution links” per video die je uploadt. Op deze linkjes staan de video’s als ‘raw’ bestand gehost op hun (snelle) servers. Met deze URLs kan je developer jouw videos naadloos in een webontwerp implementeren die responsive meeschaalt. Als lekker bonusje kan de video ingeladen worden zonder allerlei vervelende scripts van een video embed.
Deze distribution links zijn helaas wel een beetje verstopt. Daarom zal ik je er even screenshotsgewijs doorheen wandelen.
Stap 1: Upload je video
Upload in je dashboard je video door op “New Video” te klikken of het videobestaad in je browser te drag&droppen.
Stap 2: De settings vinden
Misschien moet je hier nog even wachten tot je video is geüpload, maar als dit eenmaal zover is kun je de video ‘beheren’. Klik hier aan de rechterkant op ‘Settings’.
Stap 3: De advanced settings vinden
Er schuift nu een menu uit aan de rechterzijde, klik hier onderin op “Advanced settings”.
Stap 4: Open het Distrubition tabje
Nu kom je in de échte settings. Klik nu in de linkernavigatie op “Distribution”.
Stap 5: Video File links
Er klapt links weer een menu uit. Klik daar op “Video file links”.
Stap 6: Gevonden!
Het uitgeklapte menu scrollt nu naar beneden waar je de volgende lijst te zien krijgt:
Stap 7: Een keuze maken
Hier staan de formaten nog op een rijtje:
- HLS (m3u8)
- DASH (mpd)
- HD 1080p (mp4, 1920x1080)
- HD 720p (mp4, 1280x720)
- SD 540p (mp4, 960x540)
- SD 360p (mp4, 640x360)
- SD 240p (mp4, 426x240)
Ik zou voor fullscreen homepage landing-sections kiezen voor 1080p. Voor al het andere is 720p genoeg. Vergeet ook niet: Hoe minder zwaar de video, hoe sneller je pagina laadt. Belangrijk voor je SEO score ook.
Als de video op een kleine plek terecht komt die maar een kwart van een desktop scherm zou vullen, zou ik zefls de SD 540p aan kunnen raden.
Stap 8: Profit
Als je een keuze heb gemaakt kun je op “Copy link” klikken, plak deze dan in je “Vimeo URL” input in onze custom back-end ennnnn… Voila! De video staat op je website.
Tip voor de pro’s
Moet je meer dan 20 video’s inladen bij het vullen van je website? Dit is hoe ik dat doe:
- Ik verzamel in een lijstje alle Vimeo IDs van de video’s die ik nodig heb. Dat is bijvoorbeeld 459386023.
- Kopieer deze URL in je browser en vervang [VIMEO_ID_HERE] met de eerste Vimeo ID van je lijstje.
https://vimeo.com/manage/[VIMEO_ID_HERE]/distribution#video-file-links
- Je komt nu in 1x op de advanced settings pagina, met de distribution links uitgeklapt, alvast gescrolled naar de video file links.
- Kopieer de link die je nodig hebt en plak die waar je hem hebben moet.
- Bij het stukje [VIMEO_ID_HERE] van stap 2, vervang je de Vimeo ID die er staat met de volgende van je lijstje.
- Je komt nu weer in 1x op de advanced settings pagina, met de distribution links uitgeklapt, alvast gescrolled naar de video file links.
Op deze manier hoef je niet 6 keer te klikken per video voordat je bij de lijst met URLs komt. Super handig.
Bedankt voor het lezen, ciao.