Streaming live at 10am (PST)

Video element from CMS not displaying Vimeo video

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)

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.

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

@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.

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

I’m running into the same issue. Six months later and still it’s not fixed. This is crazy. I’ve got over 100 videos that I’ve brought in via Integromat, and none of them are rendering. Additionally, I can’t rely on an automation to bring them over from Vimeo to Webflow because they’ll NEVER work until I go in and fix it manually. Come on Webflow!??!?!? Eight months or more and this isn’t fixed??? @ForumModerators @WebflowCommunityTeam No responses to this thread after months?

The only “solution” listed on this thread is to just not use Webflow’s Video element and instead create embed codes using HTML. That’s a patch, but it’s not a solution. Please Please Please help!

I’m stumbling across this thread with a similar issue on my end. I’ve been planning on a creating a workflow with Zapier to paste Vimeo links into a CMS collection, but it looks like that’s currently a fool’s errand.

Where I’m stuck is that if you post a link to a Vimeo video that hasn’t finished transcoding on their website post-upload, Webflow doesn’t appear to re-scrape the video even if you delete and re-enter the URL after transcode. It basically renders the Vimeo link useless.

Any ideas anyone? Seems like Webflow needs to address this.

@cyberdave I’m tagging you on this because you seem to be able to help so many others. The topic on this thread is marked “solved”, but as you can see when the read it, the solution is just a workaround. I can attest that this issue is not actually solved. Any use of automation services to upload to the Webflow CMS (using API or a service like Integromat or Zapier) results in a problem when pasting in Vimeo links. They don’t show up until we manually got into the CMS, cut out the vimeo link and then paste it back in. I’ve contacted Webflow support about this issue for over a year and every response is the same: this is a known issue. There is not a solution at this time.

What about the solution that @austinhay suggests in this string of posts?

I am desperate for someone at Webflow to really take notice of this issue and solve it, since without a real fix, it completely breaks the whole ease of managing the CMS with external services or connecting the CMS to a spreadsheet or database, etc,…when the video links don’t populate.

Here is a video that I created in early January of this year demonstrating the problem:

Thank you for any help you can provide, or bumping this to someone in Webflow to take a look at.

Hi @ajgash, thanks for your post and bump, the issue with the collection or api import of the video link not getting saved until it is manually entered is still open.

At the moment this item is set to hopefully be fixed by the end of the second half of this year, but I cannot give an exact timeline for the update.

The update itself is also having some pre-requisite technical updates that need to be made first/along with the api/csv update so that is part of the reason for the delay on this one.

The moment I have some good news I will let you know as Webflow does continue to receive the feedback that this needs to be fixed and our team is working toward that goal.

As to the workaround, I have not tested it, but I have also made sure our team has that info to help with the update work. You might try that to see if it works for you, it may be a workaround until the fix/update is available.

I know that is not ideal and probably not the answer you want to hear immediately, but I am helping to keep track of this now as well and will help to encourage this update be made.

1 Like

Thanks @cyberdave and everyone else for continuing to bring this issue to the surface as it really does need addressing so it’s great to hear that it’s on the map to be solved by the end of the year.