Streaming live at 10am (PST)

Zapier Youtube to Webflow CMS url don't work

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: https://preview.webflow.com/preview/caviles?utm_source=caviles&preview=036fa8764032fe393fdc5f92548e96dc

Hope there is a solution by now. Thanks guys.

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

Share screenshots of your Zapier setup?

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 :wink: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.

Hope this helps. Cheers.

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.

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.

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

Yet another tiny bug that goes unfixed for a year+

1 Like

Reincarnating this. Still not fixed!

yes, still not fixed :confused:

Any update on this? My presumption on no…

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

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>

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

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

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.

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! :raised_hands:

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

1 Like

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

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

1 Like

Any update eon this Fix?