> For the complete documentation index, see [llms.txt](https://flowout.gitbook.io/vidzflow/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://flowout.gitbook.io/vidzflow/vidzflow-web-app/share-or-embed-video/embed-as-webflow-component.md).

# Embed as Webflow component

Steps to get this working:

1. Go to the video page and open the "Share" dialog.<br>

   <figure><img src="/files/b3xZN4Arc2KCaBuve1T2" alt=""><figcaption></figcaption></figure>

2. Go to the Webflow tab and follow the instructions there.<br>

   <figure><img src="/files/zVV3WQ7SKnun6B8wa0gI" alt=""><figcaption></figcaption></figure>

   First, if you don't already have our script embedded on your page, embed it via global settings or site settings.

   <figure><img src="/files/XC4gbdDB2O98Z0x4vz5i" alt=""><figcaption></figcaption></figure>

3. Style the component however you like in Webflow designer.

4. Supported data attributes that you can assign to the \`.video-container\` element:
   1. `data-vf-autoplay` - Autoplays the video on load, automatically muted, because of the browser limitation.
   2. `data-vf-muted` - Mutes the video on load.
   3. `data-vf-loop` - Loops the video when it reaches the end.\ <br>

      <figure><img src="/files/Wb4Q6lOWqLMIyb2Mq1jU" alt=""><figcaption></figcaption></figure>

**Notes:**

* When updating the version of the external script, please always copy and paste the fresh component to Webflow. It's possible there were some markup changes, which could prevent the video from working, though we will try to make them backward-compatible as much as possible.
