For anyone who comes across this, I have an addition to @WillSmith - you can actually upload the metadata for a video programmatically.
What I think is happening is that Webflows embedding service is embed.ly. When you trigger the API to update the URL, Webflow’s backend doesn’t fire their scrapper service to fetch necessary metdata for the URL. So you’re putting the link in the url field, but only pasting in the URL to the UI fires their URL scrapper. Indeed a bug (and Webflow should fix this… any API call to image or video urls should trigger a fresh scrape automatically and enrich with metadata). The image object in webflow actually works this way.
Anyway, if you know javascript and use the CMS api, you can easily add a step to configure metadata the way Webflow wants it (see below).
“object” is just the item object if you’re using the create or update methods in the JS library. You really need the “html” “title” and “description” objects, which correspond to the UI’s needed objects to render your video using the webflow out of box object.
Hope this helps for developers. Probably not good for anyone else!
function formatWebflowVideoMetadata(object){
// object should be the fields from existing data.
try{
var url = object[“video-link”][“url”]
var vimeoVideoIds = url.split(‘https://vimeo.com/’)[1].split(’/’)
var videoMetadata = {
“url”: url,
“metadata”: {
“width”: 1920,
“height”: 1080,
“html”: <iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F${vimeoVideoIds[0]}%3Fapp_id%3D122963&dntp=1&display_name=Vimeo&url=https%3A%2F%2Fvimeo.com%2F${vimeoVideoIds[0]}%2F${vimeoVideoIds[1]}&key=c4e54deccf4d4ec997a64902e9a30300&type=text%2Fhtml&schema=vimeo\" width=\"1920\" height=\"1080\" scrolling=\"no\" title=\"Vimeo embed\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen=\"true\"></iframe>,
“aspectRatio”: 0,
“title”: object[“lessonid”],
“provider_name”: “Vimeo”,
“type”: “video”,
“description”: object[“video-description”]
}
}
return videoMetadata
} catch {
return
}
console.log(videoMetadata)
}
