Zapier Youtube to Webflow CMS url don't work

[Guaby (Gabriel)]

Hello everybody!
I’m trying to automate the process of publishing a video on Youtube and automatically added to my Webflow’s CMS collection. That works fine. But when I check the live site, the video is not visible. I check the item URL and when I cut and paste it manually works fine. But the problem is that the idea of automation is not happening. Going to every collection list and make that change is nonsense.

These case was started a year ago and I don’t see any solution: Video doesn't work with link from collection but works with same link inserted manually

---

Here is my public share link: Webflow - CA Test

Hope there is a solution by now. Thanks guys.

[samliew (webflowexpert.com)]

Did you create a Live CMS Item instead of just a CMS Item?

Share screenshots of your Zapier setup?

[matthewpmunger]

Hey @Guaby
This is a known issue when links are automated into a video field. In order for the video link to process, click in at the end of the url, add a space, delete the space, and then press tab.

If that sounds tedious then I suggest using my preferred method of relying on the Youtube ID. I’ll still import the video field url as a reference too.

Then in the Designer use an embed instead of the video element. Here I am pulling in the Youtube ID dynamically for each video. This also gives you more control over the embed if you want to use some of the customization options provided by YT.

I’d suggest implementing the Youtube Lazy Load technique which is what you see in my example.

Embedding Several YouTube Videos Slows Pageload? Here is the solution

You want to build that page with a lot of YouTube videos, but when you publish it, you realize it takes SOOOO LONG, sometimes 10 seconds(!) for a page to load! Well, this makes your site dead, because no one will stay on it more than a couple of moments, biting his nails while waiting for the hacking clips to be loaded. And, with Webflow Video Widget there is nothing you can do… It’s a problem with YouTube itself and a heavy elements which are loaded with every video clip instance on your page. …

Hope this helps. Cheers.

[radmitry (Dmitry Ra)]

Yes that was never fixed and I don’t think it is a YouTube issue.
I ended up using html embed , pasted youtube iframe into it and pulling video id dynamically from the collection, this works fine for me.

[Spencer_Irwin (Irwin)]

Hey guys. Is there any update on this? I don’t think it’s a YouTube issue either @radmitry. I know there’s a workaround, but the adding a space and removing to make the video link populate properly makes me think this should have been fixed by now. The Zapier bridge between YouTube and Webflow can be so powerful, but this little bug has a HUGE negative impact on the whole thing.

[radmitry (Dmitry Ra)]

Yes this clearly looks like a bug on Webflow side. Still no solution for this, so I used an embed replacing the video ID instead

[Fonsume]

Yet another tiny bug that goes unfixed for a year+

[radmitry (Dmitry Ra)]

Reincarnating this. Still not fixed!

[lovemyweb (Michal Czerlikowski)]

yes, still not fixed

[shaungibson99 (Shaun gibson)]

Any update on this? My presumption on no…

[shaungibson99 (Shaun gibson)]

Hi,

I see that you have used an embed as a workaround. Are you able to share the HTML? I;m looking to try this method.

Thanks in advance

[radmitry (Dmitry Ra)]

Yes, for the dynamic list I added a link block inside a dynamic item, then inserted this html embed in it, using HQ Thumbnail from Zapier to standard Webflow link in the CMS

<div style="width: 100%; height: 100%; background-image:url('THUMBNAIL LINK HERE');
    background-repeat:no-repeat; background-size:cover; transform: scale(1.16); background-position: center; background-color:white">

</div>

I also added some CSS to this HTML embed in webflow
Width:100%
and then different height in pixels based on the breakpoint, I’m sure there is a smarter way to do it.

And then this is the html embed in the Video template page, video id from Zapier linked to a simple text field in Webflow

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/VIDEO-ID-HERE?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>

Also, for the Tablet breakpoint and below I am using this CSS in webflow applied to the HTML embed to make the video automatically adjust the height based on the width, to avoid black frames:

Padding bottom: 56.25%
Height: Auto
Position: Relative

I am also using this bit of code on the Video template page to make any links in the video description active

<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-linkify/2.1.4/linkify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-linkify/2.1.4/linkify-jquery.min.js"></script>
<script>
// A $( document ).ready() block.
$( document ).ready(function() {
    $('RICH-TEXT-CLASS-HERE').linkify({
    target: "_blank"
});
});
</script>

[radmitry (Dmitry Ra)]

The result is here, unfortunately I can’t share the project in full preview.

Roger Castillo - Being Lived: Watch Videos

[Tosin_Aking]

Thank you this has been really helpful. However, I copied the code you put for the embed but the video is coming up as blank I am not sure what I have done wrong.

My Read Only:
https://preview.webflow.com/preview/the-red-tape-panel?utm_medium=preview_link&utm_source=dashboard&utm_content=the-red-tape-panel&preview=f14c21fcade446883ae772f4ee36f19e&mode=preview

[matthewpmunger]

Hey @Tosin_Aking

Are you using the lazy youtube method and have the script installed? I don’t see the script in your page settings and can’t verify your site settings. Also, scripts only run on published pages are not visible in the Designer read-only link. Follow these instructions if you do want to lazy load the videos.

Embedding Several YouTube Videos Slows Pageload? Here is the solution

You want to build that page with a lot of YouTube videos, but when you publish it, you realize it takes SOOOO LONG, sometimes 10 seconds(!) for a page to load! Well, this makes your site dead, because no one will stay on it more than a couple of moments, biting his nails while waiting for the hacking clips to be loaded. And, with Webflow Video Widget there is nothing you can do… It’s a problem with YouTube itself and a heavy elements which are loaded with every video clip instance on your page. …

The other method is to just use the Youtube embed code and use the IDs from CMS. If that will work copy and paste the code below. Adjust the width and height as needed but sticking with 100% will let you use the size setting on the class to adjust the size rather than in the code. Hope that helps!

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/{{wf {&quot;path&quot;:&quot;youtube-id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

[matthewpmunger]

Also, set the overflow to hidden on the entry block class if you want the video to be cropped by the rounded corners.

[Tosin_Aking]

Thank you it worked. I was doing the ID method! Thank you so much! As the hiding the overflow was what I wanted to do too. Perfect

[Tequilapahce (Jack Webb)]

Any update eon this Fix?

[BoxActual (Brian OToole)]

@matthewpmunger any update on this fix?

[matthewpmunger]

Hey @BoxActual are you referring to to the CMS validating and recognizing video links added via the API or Zapier? If so that is fixed and should be working without the need to manually edit and save the video link field in the CMS editor.