What You'll Need

• A Webflow site (published or in development)
• Videos uploaded to YouTube
• Vidflow license (purchase once, use everywhere)

Step 1: Prepare Your YouTube Videos

Upload your videos to YouTube:

1. Sign into YouTube Studio
2. Upload your video files
3. (Optional) Set visibility to "Unlisted" if you want them hidden from YouTube search (they'll still embed on your site)
4. Copy the video URL

Optional but recommended: Disable end screens in YouTube Studio to prevent suggested videos from other creators appearing at the end.

Step 2: Install Vidflow in Webflow

Add the Vidflow script:

1. In Webflow, go to Project Settings → Custom Code
2. Paste the Vidflow script in the Head Code section (provided after purchase)
3. Save and publish your site

This one-time setup enables Vidflow across your entire site.
If you're using Vidflow only in one page, then it is recommended you put the script in the Head Code section of that page.

Step 3: Add Video Embeds

Add a YouTube video element:

1. Add an YouTube element where you want the video to show
2. Paste the URL you copied from step 1
3. While the element is selected, head over to Settings on the right-hand pane
4. Scroll down until you find Custom attributes
5. Add a new Custom attribute, using vidflow-el as name and player as value.
6. (Optional) Adjust the parent element's styling. The embed, by default, tries to stretch in width. Consider limiting that by setting a max-width to the parent element.

That's it. After publishing the changes, your video will now display with Vidflow's clean player.

Step 4: Customize Your Embeds

Control the embed's appearance with simple attributes:

Custom thumbnail

vidflow-thumbnail="https://your-image-url.avif"

Custom CSS styling

‍Customize the player's appearance by overwriting CSS variables. Add this to Site Settings → Custom Code:

<style>
  :root {
    --vidflow-border-radius: 0.5rem;
    --vidflow-btn-size: 1rem;
    --vidflow-controls-bg: rgba(50, 50, 50, .6);
    --vidflow-accent: white;
  }
</style>

‍
Available CSS variables:

• --vidflow-border-radius - Controls corner rounding
• --vidflow-btn-size - Play button size
• --vidflow-controls-bg - Play button background color
• --vidflow-accent - Play button icon color

Example with custom styling:

<style>
  :root {
    --vidflow-border-radius: 4rem;
    --vidflow-btn-size: 30px;
    --vidflow-controls-bg: rgb(255 0 0 / 60%);
    --vidflow-accent: #ffc3c3;
  }
</style>

This creates a heavily rounded player with a red semi-transparent play button.

Troubleshooting

Video not loading

• Check that the video URL is valid by navigating it
• Verify the video isn't set to "Private" on YouTube (use "Unlisted" instead, if you wish to hide it from YouTube)
• Confirm the Vidflow script is in your site's Head Code

Thumbnail not showing

• Ensure the image URL is publicly accessible
• Use direct image links (ending in .avif, .jpg, .png)
• Check for HTTPS URLs (not HTTP)

Controls not hiding

• Some YouTube videos have forced controls due to copyright/age restrictions
• If you own the video, check YouTube Studio settings

Video quality is low

• YouTube automatically adjusts quality based on viewer's connection
• Upload the highest quality version possible to YouTube
• Consider reducing embed size if quality is a concern

Didn't find what you were looking for?

Reach out, we'll get back within one business day!