How to Embed YouTube Video on Webflow
You can embed YouTube videos on your Webflow website to showcase your work, promote your brand, or engage your audience. In this guide, you will learn how to use a custom HTML code to embed YouTube videos on Webflow in a few simple steps. You will also learn how to customize the appearance and behavior of your YouTube video player using various parameters. Let’s get started!
Prerequisites
A YouTube Video Collection
A Webflow Website on a paid plan
You can use Idukki to create and display a collection of YouTube videos on your website. Follow these steps to get started:
Choose YouTube as the source and select a channel, a playlist or hashtags to fetch videos. Learn more.
Edit your collection by hiding or pinning videos, tagging products, and getting approval from users. Learn more.
Now, click Publish to either directly proceed to the publishing window, or select Curate my feed to customize your collection by changing its appearance and layout. Learn more.
After curating, click Publish to copy the HTML code from the publishing window. You can also preview your collection before embedding it on your website.
Your collection will automatically reflect any changes you make to it.
To display your YouTube video collection on your Webflow website, follow these steps:
Log in to your Webflow account and open the project you want to edit.
Navigate to the page from the drop-down at the top-left where you want to embed the YouTube collection.
Add an Embed element from the Add panel to the Webflow canvas at the desired location.
Paste the HTML code you copied from Idukki into the Embed element and click Save and Close.
Publish your Webflow site and check out your YouTube collection.
You can modify the embed element in the Webflow editor to match your website design.
I hope this helps.
Prerequisites
A YouTube Video Collection
A Webflow Website on a paid plan
Creating a YouTube Videos Collection
You can use Idukki to create and display a collection of YouTube videos on your website. Follow these steps to get started:
Choose YouTube as the source and select a channel, a playlist or hashtags to fetch videos. Learn more.
Edit your collection by hiding or pinning videos, tagging products, and getting approval from users. Learn more.
Now, click Publish to either directly proceed to the publishing window, or select Curate my feed to customize your collection by changing its appearance and layout. Learn more.
After curating, click Publish to copy the HTML code from the publishing window. You can also preview your collection before embedding it on your website.
Your collection will automatically reflect any changes you make to it.
Embedding into Webflow
To display your YouTube video collection on your Webflow website, follow these steps:
Log in to your Webflow account and open the project you want to edit.
Navigate to the page from the drop-down at the top-left where you want to embed the YouTube collection.
Add an Embed element from the Add panel to the Webflow canvas at the desired location.
Paste the HTML code you copied from Idukki into the Embed element and click Save and Close.
Publish your Webflow site and check out your YouTube collection.
You can modify the embed element in the Webflow editor to match your website design.
I hope this helps.
Updated on: 15/08/2023
Thank you!