Video element from CMS not displaying Vimeo video

[WillSmith]

Hi all,

I have a video field in my CMS, and I’m populating a video element from that field. Pretty straightforward.

But the video isn’t displaying on the page.

And when I view the source code of the page, it appears that Webflow isn’t even rendering the video element.

I’m very sure that the video field has a value, so I don’t believe the problem is that the CMS field is empty.

Really can’t figure out what it is. Please help.

Thanks!

PS. Love Webflow.

---

Here is my public share link: https://preview.webflow.com/preview/great-fit?utm_medium=preview_link&utm_source=dashboard&utm_content=great-fit&preview=c03bf5f2d72124e127273571976451d1&mode=preview
(how to access public share link)

[WillSmith]

OK, I finally figured this out. For anyone else struggling with this issue –

Webflow seems to render a Vimeo video link only when you manually enter it into the CMS.

So if you add the URL to the video link programmatically, with Zapier for example, it won’t render that URL as a video.

Here’s how you can tell:

Paste a URL from a Vimeo video into a CMS video field. It automatically displays a small embed of the video right there, in a second or less. Very nice. If you then leave and come back to that entry in the CMS, you’ll still see that embedded video displayed below the link you entered in the video field. All good.

Now, contrast that with adding that same video link via Zapier. When you examine the entry in the CMS, you’ll see the URL in the video field link but the embedded video will NOT appear under it. Which suggests that Webflow hasn’t rendered the link, and won’t ever do so. (Unless you delete the URL value and re-paste it – manually. Then it works.)

Seems like a bug.

My fix was to grab the Vimeo video ID and use Vimeo’s responsive embed code to display it in an HTML embed element.

[ugleplastik (Alexander)]

Stuck with the same. The parsing failure is something that you least expect importing a .csv with links to videos from one WF project, to another

[austinhay]

@WebflowCommunityTeam How is this a valid solution? I have spent over a month building with webflow only to find out that your URL scrapper doesn’t properly scrape Vimeo links. Really disappointing.

Can we please get some support on this request. All URL types (not just youtube) should be supported.

[austinhay]

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)
}