How can the thin black lines be removed from YouTube videos in Webflow?

To remove the thin black lines from YouTube videos in Webflow, you would need to target the embedded video element and apply some custom CSS. Here are the steps you can follow:

1. Identify the embedded YouTube video element on your Webflow page. It is usually represented as an `` tag.</p><p>2. Give the embedded video element a custom class or ID to make it easier to target with CSS. You can do this by selecting the video element, going to the "Settings" panel on the right, and adding a class or ID under the "Class" or "ID" field.</p><p>3. Once you have a class or ID added to your video element, you can now write custom CSS to remove the black lines. You have two options here:</p><p>a) Target the class or ID directly: For example, if you assigned the class "my-video" to the video element, you can target it with CSS using `.my-video`.</p><p>b) Target the `<iframe>` directly: If you didn't assign a class or ID, you can target the `<iframe>` parent element using `iframe` in your CSS.</p><p>4. Now, to remove the black lines, you can use the `border` property in CSS. Set it to "none" or "0" to remove the border. Here's an example of the CSS you can use:</p><p>```css<br />.my-video, iframe {<br />border: none;<br />}<br />```</p><p>5. Apply the CSS. If you have a custom class or ID, add the CSS code to your Webflow project by going to the "Project settings" in the top-right corner of the Webflow Designer, selecting the "Custom Code" tab, and adding the code to either the "Head code" or "Before body end tag" field. If you targeted the `<iframe>` directly, you can add the CSS code inline in the HTML embed code.</p><p>6. Save your changes and publish the site. After publishing, the black lines around the YouTube video should be removed.</p><p>Remember to adapt the CSS code to your specific class, ID, or `<iframe>` targeting. Additionally, keep in mind that YouTube may update their embed code in the future, so you might need to adjust the CSS accordingly to target the video element correctly.</p><p>It's always a good practice to preview your changes on different devices and browsers to ensure that the black lines are consistently removed across all platforms.</p></div></div><div class="content31_newsletter_wrapper"><div class="content31_newsletter"><div class="margin-bottom margin-small"><div class="author-bio-name_heading">Webflow Resources</div></div><a href="https://link.flowradar.com/webflow-best-templates" target="_blank" class="answers-sidebar-cta_div w-inline-block"><div class="icon-embed-xsmall w-embed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--carbon" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="M26 6v4H6V6h20m0-2H6a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM10 16v10H6V16h4m0-2H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V16a2 2 0 0 0-2-2zm16 2v10H16V16h10m0-2H16a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V16a2 2 0 0 0-2-2z"></path></svg></div><div>Webflow templates</div></a><a href="https://link.flowradar.com/webflow-inspiration" target="_blank" class="answers-sidebar-cta_div w-inline-block"><div class="icon-embed-xsmall w-embed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ph" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><g fill="currentColor"><path d="M208 104a79.86 79.86 0 0 1-30.59 62.92A24.29 24.29 0 0 0 168 186v6a8 8 0 0 1-8 8H96a8 8 0 0 1-8-8v-6a24.11 24.11 0 0 0-9.3-19A79.87 79.87 0 0 1 48 104.45C47.76 61.09 82.72 25 126.07 24A80 80 0 0 1 208 104Z" opacity=".2"></path><path d="M176 232a8 8 0 0 1-8 8H88a8 8 0 0 1 0-16h80a8 8 0 0 1 8 8Zm40-128a87.55 87.55 0 0 1-33.64 69.21A16.24 16.24 0 0 0 176 186v6a16 16 0 0 1-16 16H96a16 16 0 0 1-16-16v-6a16 16 0 0 0-6.23-12.66A87.59 87.59 0 0 1 40 104.5c-.26-47.67 38.26-87.35 85.88-88.5A88 88 0 0 1 216 104Zm-16 0a72 72 0 0 0-73.74-72c-39 .92-70.47 33.39-70.26 72.39a71.64 71.64 0 0 0 27.64 56.3A32 32 0 0 1 96 186v6h24v-44.69l-29.66-29.65a8 8 0 0 1 11.32-11.32L128 132.69l26.34-26.35a8 8 0 0 1 11.32 11.32L136 147.31V192h24v-6a32.12 32.12 0 0 1 12.47-25.35A71.65 71.65 0 0 0 200 104Z"></path></g></svg></div><div>Webflow inspiration</div></a></div><div class="content31_newsletter"><div class="margin-bottom margin-small"><div class="author-bio-name_heading">Rate this answer</div></div><div class="item-feedback_div"><div class="jetboost-toggle-favorite-b92e"><a href="#" class="thumbs-up-not-favorite w-inline-block"><div class="icon-embed-xsmall w-embed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--iconoir" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M16.472 20H4.1a.6.6 0 0 1-.6-.6V9.6a.6.6 0 0 1 .6-.6h2.768a2 2 0 0 0 1.715-.971l2.71-4.517a1.631 1.631 0 0 1 2.961 1.308l-1.022 3.408a.6.6 0 0 0 .574.772h4.575a2 2 0 0 1 1.93 2.526l-1.91 7A2 2 0 0 1 16.473 20Z"></path><path stroke-linejoin="round" d="M7 20V9"></path></g></svg></div></a><a href="#" class="thumbs-up-favorited w-inline-block"><div class="icon-embed-xsmall w-embed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--iconoir" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M16.472 20H4.1a.6.6 0 0 1-.6-.6V9.6a.6.6 0 0 1 .6-.6h2.768a2 2 0 0 0 1.715-.971l2.71-4.517a1.631 1.631 0 0 1 2.961 1.308l-1.022 3.408a.6.6 0 0 0 .574.772h4.575a2 2 0 0 1 1.93 2.526l-1.91 7A2 2 0 0 1 16.473 20Z"></path><path stroke-linejoin="round" d="M7 20V9"></path></g></svg></div></a></div><div class="jetboost-toggle-favorite-4q76"><a href="#" class="thumbs-down-not-favorite w-inline-block"><div class="icon-embed-xsmall w-embed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--iconoir" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M16.472 3.5H4.1a.6.6 0 0 0-.6.6v9.8a.6.6 0 0 0 .6.6h2.768a2 2 0 0 1 1.715.971l2.71 4.517a1.631 1.631 0 0 0 2.961-1.308l-1.022-3.408a.6.6 0 0 1 .574-.772h4.575a2 2 0 0 0 1.93-2.526l-1.91-7A2 2 0 0 0 16.473 3.5Z"></path><path stroke-linejoin="round" d="M7 14.5v-11"></path></g></svg></div></a><a href="#" class="thumbs-down-favorited w-inline-block"><div class="icon-embed-xsmall w-embed"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--iconoir" width="100%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M16.472 3.5H4.1a.6.6 0 0 0-.6.6v9.8a.6.6 0 0 0 .6.6h2.768a2 2 0 0 1 1.715.971l2.71 4.517a1.631 1.631 0 0 0 2.961-1.308l-1.022-3.408a.6.6 0 0 1 .574-.772h4.575a2 2 0 0 0 1.93-2.526l-1.91-7A2 2 0 0 0 16.473 3.5Z"></path><path stroke-linejoin="round" d="M7 14.5v-11"></path></g></svg></div></a></div></div></div></div></div></div></div></div></header><section class="section_top-items"><div class="padding-global"><div class="container-large"><div class="padding-section-large"><div id="w-node-_440228f7-117e-d715-0416-8cc78dc9b51e-bfb8c375" class="margin-bottom margin-medium"><div class="blog65_heading-wrapper"><div class="blog65_heading"><div class="max-width-large-2"><div class="margin-bottom margin-xsmall"><h2 class="heading-medium">Other Webflow Questions</h2></div></div></div><div class="blog65_button-row hide-mobile-landscape hide"><a href="/tutorial/explore?integrations=integromat%7Cparabola%7Czapier" class="button-md secondary w-inline-block"><div class="text-sm-medium secondary">Explore Logic tutorials</div></a></div></div></div><div class="answers-collection_wrapper w-dyn-list"><div role="list" class="answers-collection_list w-dyn-items"><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/facebook-domain-verification-issues-webflow-custom-code" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">What are the issues with Facebook Domain Verifications in Webflow custom code?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/webflow-site-pulls-content-from-own-cms-through-api" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Can I build a Webflow site that pulls content from my own CMS through an API (JSON or XML)?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/is-it-possible-to-use-webflow-to-create-hover-effects-that-change-elements" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Is it possible to use Webflow to create hover effects that change elements other than the one being hovered over?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/why-do-design-changes-made-on-one-page-in-webflows-lander-template-affect-other-pages" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Why do design changes made on one page in Webflow's "lander" template affect other pages as well?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/is-it-possible-to-add-embed-code-into-a-collection-field-in-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Is it possible to add embed code into a collection field in Webflow to display an external calendar on each collection page?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/how-can-an-alt-tag-be-added-to-an-image-in-webflow-after-uploading-it" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can an Alt tag be added to an image in Webflow after uploading it?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/load-animation-first-visit-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Is it possible to have a load animation only display for the user's first visit to the home page in Webflow, without being shown on subsequent visits?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/where-to-find-first-buy-button-embedded-products-template-dynamic-collection-page" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Where can I find the first buy button embedded on the "Products Template" dynamic collection page in Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/reason-for-layout-text-display-problems-on-mac-ios-with-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">What could be the reason for the layout issues and text display problems on Mac and iOS devices when my website, designed using Webflow, is working properly on Windows and Android?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/change-hover-background-color-checkboxes-webflow-without-setting-custom" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I change the hover and background color of checkboxes in Webflow without having to set every checkbox to custom? I've tried adding custom code to the project settings but haven't been able to change the background color. Any suggestions? Thank you!</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/webflow-support-ideal-payment-option-and-full-stripe-integration" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Does Webflow support IDEAL as a payment option and provide full STRIPE integration?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/highlight-link-current-page-navbar-menu-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Is it possible to highlight the link to the current page in the Navbar/Menu in Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/apply-transparent-black-color-overlay-cms-image-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Can I apply a transparent black color overlay to a CMS image in Webflow? I can only find the option to adjust opacity, but I prefer the image to be black instead of white.</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/how-can-i-ensure-contact-forms-go-to-client-mailbox-not-mailchimp" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I ensure that contact forms submitted on websites created using Webflow and exported to clients' hosting companies are still sent directly to the client's mailbox, rather than a third-party service like Mailchimp?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/am-i-not-using-webflow-cms-properly-if-i-need-more-than-30-fields-for" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Am I not using Webflow CMS properly if I need more than 30 fields for each case study section? Can I add a non-collection section to a collection page in Webflow? Is there a better way to build case studies using Webflow that allows for more flexibility? Thank you.</div></a></div></div></div><div class="answers-collection_wrapper w-dyn-list"><div role="list" class="answers-collection_list w-dyn-items"><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/can-webflow-be-used-to-call-a-css-or-js-file-stored-on-different-server" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/webflow-youtube-component-recognize-channel-ids-instead-of-video-ids" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">Can the Webflow YouTube component recognize channel IDs instead of video IDs for embedding a Live Stream?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/how-can-i-use-the-finsweet-script-to-manage-two-different-sliders-on" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/prevent-fullscreen-slider-pause-on-hover-link-sliders-javascript" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/fix-scroll-issue-iphone-safari-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/how-can-i-prevent-scroll-when-my-nav-is-open-in-webflow-using-code" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/how-to-add-date-filtering-to-my-list-using-finsweet-cms-filtering" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/change-language-publication-dates-webflow-cms-collection-portuguese" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/whitelist-IP-user-agent-third-party-vendor-crawl-Webflow-site" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I whitelist the IP or user agent of a third-party vendor to crawl my Webflow site for legal compliance archiving purposes?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/configure-webflow-forms-exclude-empty-unchecked-checkboxes-customize-email-text" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/dynamically-redirect-cms-created-after-form-submission-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I dynamically redirect to a CMS created after form submission in Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/make-menu-close-when-link-clicked-in-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I make the menu close when a link is clicked in Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/how-hide-no-items-found-empty-field-webflow-second-multi-image" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/implement-swipe-functionality-between-tab-panes-using-custom-code-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?</div></a></div><div role="listitem" class="answers-collection_item w-dyn-item"><a href="/answer/add-user-input-end-redirect-url-webflow" class="answers-collection_div w-inline-block"><div class="heading-style-h6 text-style-2lines">How can I add user input to the end of the redirect URL in Webflow?</div></a></div></div></div></div></div></div></section><footer class="footer5_component"><div class="page-padding"><div class="container-large"><div class="padding-vertical padding-xxlarge"><div class="padding-bottom padding-xxlarge"><div class="w-layout-grid footer5_top-wrapper"><a href="/" id="w-node-_4c56fd38-71c5-d940-a650-19ed1da6aaa9-1da6aa91" class="footer5_logo-link w-nav-brand"><img src="https://assets-global.website-files.com/61e46d66024d2ef28c3f257c/63abd9c7dd43e2eacc5383b2_fr-logo-new.svg" loading="lazy" alt="" class="footer_logo"/></a><div class="footer5_link-list"><div class="footer5_column-heading">Templates</div><a href="/templates-categories/cms" class="footer5_link">CMS templates</a><a href="/?free-or-paid=Free" class="footer5_link">Free templates</a><a href="/templates-categories/saas" class="footer5_link">SaaS templates</a><a href="/templates-categories/ecommerce" class="footer5_link">Ecommerce templates</a><a href="/template/explore" class="footer5_link">All Webflow templates</a></div><div class="footer5_link-list"><div class="footer5_column-heading">Cloneables</div><a href="/cloneable-categories/styleguide" class="footer5_link">Styleguides</a><a href="/cloneable-categories/accordion" class="footer5_link">Accordions</a><a href="/cloneable-categories/text-effects" class="footer5_link">Text animations</a><a href="/cloneable-categories/cms" class="footer5_link">CMS cloneables</a><a href="/cloneable/explore" class="footer5_link">All Webflow cloneables</a></div><div class="footer5_link-list"><div class="footer5_column-heading">Resources</div><a href="/inspiration" class="footer5_link w-inline-block"><div>Inspiration</div><div class="badge gray footer"><div class="text-xs-medium badge-label gray">New</div></div></a><a href="/products/webflow-domain-list" class="footer5_link w-inline-block"><div>Products</div><div class="badge gray footer"><div class="text-xs-medium badge-label gray">New</div></div></a><a href="/integration/explore" class="footer5_link">Webflow Tools</a><a href="/tutorials" class="footer5_link">Webflow Tutorials</a><a href="/expert/explore" class="footer5_link">Designers</a><a href="/webflow-checklist" class="footer5_link">Webflow checklist</a><a href="/snippet/explore" class="footer5_link w-inline-block"><div>Code snippets</div></a><a href="/webflow-keyboard-shortcuts" class="footer5_link w-inline-block"><div>Keyboard shortcuts</div></a><a href="/webflow-limitations" class="footer5_link w-inline-block"><div>Webflow limits</div></a><a href="/changes" class="footer5_link w-inline-block"><div>Changelog</div><div class="badge gray footer"><div class="text-xs-medium badge-label gray">New</div></div></a><a href="/add-resource" class="footer5_link">Add resource</a></div><div class="footer5_link-list hide"><div class="footer5_column-heading">Column Five</div><a href="#" class="footer5_link">Link Twenty One</a><a href="#" class="footer5_link">Link Twenty Two</a><a href="#" class="footer5_link">Link Twenty Three</a><a href="#" class="footer5_link">Link Twenty Four</a><a href="#" class="footer5_link">Link Twenty Five</a></div></div></div><div class="line-divider breadcrumbs"></div><div class="footer5_newsletter-wrapper"><div class="footer5_newsletter-text-wrapper"><div class="text-weight-semibold text-size-medium">Get the best of Webflow delivered weekly</div><p>Each week we send a roundup of all things Webflow</p></div><div class="footer5_form-block w-form"><form id="email-form" name="email-form" data-name="Email Form" method="get" class="footer5_form" data-wf-page-id="64d4092642c97b70bfb8c375" data-wf-element-id="4c56fd38-71c5-d940-a650-19ed1da6aa9c"><input class="form-input-2 w-input" maxlength="256" name="email" data-name="email" placeholder="Enter your email" type="email" id="email-6" required=""/><input type="submit" data-wait="Please wait..." class="button-xl w-button" value="Subscribe"/></form><div class="text-size-tiny">No spam, just weekly Webflow ♥ goodness.</div><div class="success-message-2 w-form-done"><div>Thank you! Your submission has been received!</div></div><div class="error-message w-form-fail"><div>Oops! Something went wrong while submitting the form.</div></div></div></div><div class="padding-top padding-medium"><div class="footer5_bottom-wrapper"><div class="w-layout-grid footer5_legal-list"><div id="w-node-_4c56fd38-71c5-d940-a650-19ed1da6aaf0-1da6aa91" class="footer5_credit-text">© 2024 FlowRadar. All right reserved.</div><a href="#" class="footer5_legal-link hide">Privacy Policy</a><a href="#" class="footer5_legal-link hide">Terms of Service</a><a href="#" class="footer5_legal-link hide">Cookies Settings</a></div><div class="w-layout-grid footer5_social-icons"><a href="https://www.facebook.com/FlowRadarcom/" target="_blank" class="footer5_social-link w-inline-block"><div class="social-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16.5 6H13.5C12.9477 6 12.5 6.44772 12.5 7V10H16.5C16.6137 9.99748 16.7216 10.0504 16.7892 10.1419C16.8568 10.2334 16.8758 10.352 16.84 10.46L16.1 12.66C16.0318 12.8619 15.8431 12.9984 15.63 13H12.5V20.5C12.5 20.7761 12.2761 21 12 21H9.5C9.22386 21 9 20.7761 9 20.5V13H7.5C7.22386 13 7 12.7761 7 12.5V10.5C7 10.2239 7.22386 10 7.5 10H9V7C9 4.79086 10.7909 3 13 3H16.5C16.7761 3 17 3.22386 17 3.5V5.5C17 5.77614 16.7761 6 16.5 6Z" fill="CurrentColor"/> </svg></div></a><a href="#" class="footer5_social-link hide w-inline-block"><div class="social-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M16 3H8C5.23858 3 3 5.23858 3 8V16C3 18.7614 5.23858 21 8 21H16C18.7614 21 21 18.7614 21 16V8C21 5.23858 18.7614 3 16 3ZM19.25 16C19.2445 17.7926 17.7926 19.2445 16 19.25H8C6.20735 19.2445 4.75549 17.7926 4.75 16V8C4.75549 6.20735 6.20735 4.75549 8 4.75H16C17.7926 4.75549 19.2445 6.20735 19.25 8V16ZM16.75 8.25C17.3023 8.25 17.75 7.80228 17.75 7.25C17.75 6.69772 17.3023 6.25 16.75 6.25C16.1977 6.25 15.75 6.69772 15.75 7.25C15.75 7.80228 16.1977 8.25 16.75 8.25ZM12 7.5C9.51472 7.5 7.5 9.51472 7.5 12C7.5 14.4853 9.51472 16.5 12 16.5C14.4853 16.5 16.5 14.4853 16.5 12C16.5027 10.8057 16.0294 9.65957 15.1849 8.81508C14.3404 7.97059 13.1943 7.49734 12 7.5ZM9.25 12C9.25 13.5188 10.4812 14.75 12 14.75C13.5188 14.75 14.75 13.5188 14.75 12C14.75 10.4812 13.5188 9.25 12 9.25C10.4812 9.25 9.25 10.4812 9.25 12Z" fill="CurrentColor"/> </svg></div></a><a href="https://twitter.com/flowradarcom" class="footer5_social-link w-inline-block"><div class="social-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.9728 6.7174C20.5084 7.33692 19.947 7.87733 19.3103 8.31776C19.3103 8.47959 19.3103 8.64142 19.3103 8.81225C19.3154 11.7511 18.1415 14.5691 16.0518 16.6345C13.962 18.6999 11.1312 19.8399 8.19405 19.7989C6.49599 19.8046 4.81967 19.4169 3.29642 18.6661C3.21428 18.6302 3.16131 18.549 3.16162 18.4593V18.3604C3.16162 18.2313 3.26623 18.1267 3.39527 18.1267C5.06442 18.0716 6.67402 17.4929 7.99634 16.4724C6.48553 16.4419 5.12619 15.5469 4.5006 14.1707C4.46901 14.0956 4.47884 14.0093 4.52657 13.9432C4.57429 13.8771 4.653 13.8407 4.73425 13.8471C5.19342 13.8932 5.65718 13.8505 6.1002 13.7212C4.43239 13.375 3.17921 11.9904 2.99986 10.2957C2.99349 10.2144 3.02992 10.1357 3.096 10.0879C3.16207 10.0402 3.24824 10.0303 3.32338 10.062C3.77094 10.2595 4.25409 10.3635 4.74324 10.3676C3.28184 9.40846 2.65061 7.58405 3.20655 5.92622C3.26394 5.76513 3.40181 5.64612 3.5695 5.61294C3.73718 5.57975 3.90996 5.63728 4.02432 5.76439C5.99639 7.86325 8.70604 9.11396 11.5819 9.25279C11.5083 8.95885 11.4721 8.65676 11.4741 8.35372C11.501 6.76472 12.4842 5.34921 13.9634 4.76987C15.4425 4.19054 17.1249 4.56203 18.223 5.71044C18.9714 5.56785 19.695 5.31645 20.3707 4.96421C20.4202 4.93331 20.483 4.93331 20.5325 4.96421C20.5634 5.01373 20.5634 5.07652 20.5325 5.12604C20.2052 5.87552 19.6523 6.50412 18.9509 6.92419C19.5651 6.85296 20.1685 6.70807 20.7482 6.49264C20.797 6.45942 20.8611 6.45942 20.9099 6.49264C20.9508 6.51134 20.9814 6.54711 20.9935 6.59042C21.0056 6.63373 20.998 6.68018 20.9728 6.7174Z" fill="CurrentColor"/> </svg></div></a><a href="#" class="footer5_social-link hide w-inline-block"><div class="social-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3ZM8 18C8.27614 18 8.5 17.7761 8.5 17.5V10.5C8.5 10.2239 8.27614 10 8 10H6.5C6.22386 10 6 10.2239 6 10.5V17.5C6 17.7761 6.22386 18 6.5 18H8ZM7.25 9C6.42157 9 5.75 8.32843 5.75 7.5C5.75 6.67157 6.42157 6 7.25 6C8.07843 6 8.75 6.67157 8.75 7.5C8.75 8.32843 8.07843 9 7.25 9ZM17.5 18C17.7761 18 18 17.7761 18 17.5V12.9C18.0325 11.3108 16.8576 9.95452 15.28 9.76C14.177 9.65925 13.1083 10.1744 12.5 11.1V10.5C12.5 10.2239 12.2761 10 12 10H10.5C10.2239 10 10 10.2239 10 10.5V17.5C10 17.7761 10.2239 18 10.5 18H12C12.2761 18 12.5 17.7761 12.5 17.5V13.75C12.5 12.9216 13.1716 12.25 14 12.25C14.8284 12.25 15.5 12.9216 15.5 13.75V17.5C15.5 17.7761 15.7239 18 16 18H17.5Z" fill="CurrentColor"/> </svg></div></a></div></div><div class="margin-top margin-small"><div class="footer-about_div"><div class="footer-about text-xs-normal">FlowRadar.com is not affiliated with Webflow. We simply ♥ <a href="https://link.flowradar.com/webflow" target="_blank" class="footer_links">Webflow</a>. This website was built in <a href="https://link.flowradar.com/webflow" target="_blank" class="footer_links">Webflow</a>, connected to <a href="https://link.flowradar.com/airtable" target="_blank" class="footer_links">Airtable</a> and <a href="https://www.flowmonk.com/?ref=flowradar" class="footer_links">real-time Airtable & Webflow syncing</a> by Flowmonk. Search & filtering powered by <a href="https://link.flowradar.com/jetboost" target="_blank" class="footer_links">Jetboost</a>. Webflow components by <a href="https://link.flowradar.com/relume" target="_blank" class="footer_links">Relume</a>. FlowRadar is reader-supported, some links may be affiliate links.</div></div></div></div></div></div></div></footer></div><script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=61e46d66024d2ef28c3f257c" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script src="https://assets-global.website-files.com/61e46d66024d2ef28c3f257c/js/webflow.d5fef0df7.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js"></script> <script src="https://cdn.jsdelivr.net/npm/preact/dist/preact.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.5.1/dist/algoliasearch-lite.umd.js"></script> <script> const { autocomplete, getAlgoliaResults } = window['@algolia/autocomplete-js']; const appId = "0J2XGWBAEG"; const apiKey = "780ddde038795dc79d2d680bdfa1bad8"; const searchClient = algoliasearch(appId, apiKey); const { setIsOpen } = autocomplete({ container: "#autocomplete", placeholder: "Search ( ⌘ + k )", detachedMediaQuery: '', openOnFocus: true, getSources({ query, state }) { if (!query) { return []; } return [ { sourceId: "cloneables", getItems() { return getAlgoliaResults({ searchClient, queries: [ { indexName: 'cloneables', query, params: { attributesToSnippet: ['name:10', 'summary:35'], snippetEllipsisText: '…', hitsPerPage: 10 } } ] }); }, templates: { header({ items, html }) { return html`<span class="aa-SourceHeaderTitle">Cloneables</span> <div class="aa-SourceHeaderLine" />`; }, item({ item, components, html }) { return html`<a class="aa-ItemLink" href="/cloneables/${item.Slug}"> <div class="aa-ItemContent"> <div class="algolia-cloneables-image_div"> <a href="/cloneables/${item.Slug}"><img src="${item['Cloneable Image']}" alt="${item.Name}" class="algolia-cloneable_image" /></a> </div> <div class="aa-ItemContentBody"> <div class="algolia-cloneables-title_text"> ${components.Snippet({ hit: item, attribute: 'Name', })} </div> <div class="aa-ItemContentSubtitle hide"> Published in <strong>${item["Cloneable Categories"]}</strong> </div> <div class="aa-ItemContentDescription text-style-3lines"> ${components.Snippet({ hit: item, attribute: 'Webflow Description', })} </div> </div> </div> </a>`; }, noResults() { return "No posts for this query."; } }, getItemUrl({ item }) { return "/cloneables/" + item.Slug; }, }, { sourceId: "templates", getItems() { return getAlgoliaResults({ searchClient, queries: [ { indexName: 'templates', query, params: { attributesToSnippet: ['name:10', 'summary:35'], snippetEllipsisText: '…', hitsPerPage: 10 } } ] }); }, templates: { header({ items, html }) { return html`<span class="aa-SourceHeaderTitle">Templates</span> <div class="aa-SourceHeaderLine" />`; }, item({ item, components, html }) { return html`<a class="aa-ItemLink" href="/templates/${item.Slug}"> <div class="aa-ItemContent"> <div class="algolia-cloneables-image_div"> <a href="/templates/${item.Slug}"><img src="${item.Screenshot}" alt="${item.Name}" class="algolia-template_image" /></a> </div> <div class="aa-ItemContentBody hide"> <div class="algolia-cloneables-title_text"> ${components.Snippet({ hit: item, attribute: 'Name', })} </div> <div class="hide"> Published in <strong>${item["Template Categories"]}</strong> </div> <div class="aa-ItemContentDescription text-style-3lines hide"> ${components.Snippet({ hit: item, attribute: 'Description', })} </div> </div> </div> </a>`; }, noResults() { return "No posts for this query."; } }, getItemUrl({ item }) { return "/templates/" + item.Slug; }, }, { sourceId: "customcode", getItems() { return getAlgoliaResults({ searchClient, queries: [ { indexName: 'customcode', query, params: { attributesToSnippet: ['name:10', 'summary:35'], snippetEllipsisText: '…', hitsPerPage: 10 } } ] }); }, templates: { header({ items, html }) { return html`<span class="aa-SourceHeaderTitle">Code snippets</span> <div class="aa-SourceHeaderLine" />`; }, item({ item, components, html }) { return html`<a class="aa-ItemLink" href="/custom-code/${item.Slug}"> <div class="aa-ItemContent"> <div class="algolia-cloneables-image_div"> <a href="/templates/${item.Slug}"><img src="${item['Custom code - Small']}" alt="${item.Name}" class="algolia-cloneable_image" /></a> </div> <div class="aa-ItemContentBody"> <div class="algolia-cloneables-title_text"> ${components.Snippet({ hit: item, attribute: 'Name', })} </div> <div class="hide"> Published in <strong>${item["Code - Categories"]}</strong> </div> <div class="aa-ItemContentDescription text-style-3lines"> ${components.Snippet({ hit: item, attribute: 'Description', })} </div> </div> </div> </a>`; }, noResults() { return "No posts for this query."; } }, getItemUrl({ item }) { return "/custom-code/" + item.Slug; }, }, { sourceId: "integrations", getItems() { return getAlgoliaResults({ searchClient, queries: [ { indexName: 'integrations', query, params: { attributesToSnippet: ['name:10', 'summary:35'], snippetEllipsisText: '…', hitsPerPage: 10 } } ] }); }, templates: { header({ items, html }) { return html`<span class="aa-SourceHeaderTitle">Integrations</span> <div class="aa-SourceHeaderLine" />`; }, item({ item, components, html }) { return html`<a class="aa-ItemLink" href="/integrations/${item.Slug}"> <div class="aa-ItemContent"> <div class="algolia-cloneables-image_div"> <a href="/templates/${item.Slug}"><img src="${item.Logo}" alt="${item.Name}" class="algolia-cloneable_image small" /></a> </div> <div class="aa-ItemContentBody"> <div class="algolia-cloneables-title_text"> ${components.Snippet({ hit: item, attribute: 'Name', })} </div> <div class="hide"> Published in <strong>${item["Integration - Categories"]}</strong> </div> <div class="aa-ItemContentDescription text-style-2lines"> ${components.Snippet({ hit: item, attribute: 'Description', })} </div> </div> </div> </a>`; }, noResults() { return "No posts for this query."; } }, getItemUrl({ item }) { return "/integrations/" + item.Slug; }, }, { sourceId: "tutorials", getItems() { return getAlgoliaResults({ searchClient, queries: [ { indexName: 'tutorials', query, params: { attributesToSnippet: ['name:10', 'summary:35'], snippetEllipsisText: '…', hitsPerPage: 10 } } ] }); }, templates: { header({ items, html }) { return html`<span class="aa-SourceHeaderTitle">Tutorials</span> <div class="aa-SourceHeaderLine" />`; }, item({ item, components, html }) { return html`<a class="aa-ItemLink" href="/tutorials/${item.Slug}"> <div class="aa-ItemContent"> <div class="algolia-cloneables-image_div"> <a href="/templates/${item.Slug}"><img src="${item['Youtube thumbnail - normal (320x180)']}" alt="${item.Name}" class="algolia-cloneable_image" /></a> </div> <div class="aa-ItemContentBody"> <div class="algolia-cloneables-title_text"> ${components.Snippet({ hit: item, attribute: 'Name', })} </div> <div class="hide"> Published in <strong>${item["Integrations mentioned/utilized"]}</strong> </div> <div class="aa-ItemContentDescription text-style-2lines"> ${components.Snippet({ hit: item, attribute: 'Description', })} </div> </div> </div> </a>`; }, noResults() { return "No posts for this query."; } }, getItemUrl({ item }) { return "/tutorials/" + item.Slug; }, }, { sourceId: "experts", getItems() { return getAlgoliaResults({ searchClient, queries: [ { indexName: 'experts', query, params: { attributesToSnippet: ['name:10', 'summary:35'], snippetEllipsisText: '…', hitsPerPage: 7 } } ] }); }, templates: { header({ items, html }) { return html`<span class="aa-SourceHeaderTitle">Experts</span> <div class="aa-SourceHeaderLine" />`; }, item({ item, components, html }) { return html`<a class="aa-ItemLink" href="/experts/${item.Slug}"> <div class="aa-ItemContent"> <div class="algolia-cloneables-image_div"> <a href="/templates/${item.Slug}"><img src="${item['Profile image - Small']}" alt="${item.Name}" class="algolia-cloneable_image experts" /></a> </div> <div class="aa-ItemContentBody"> <div class="algolia-cloneables-title_text"> ${components.Snippet({ hit: item, attribute: 'Name', })} </div> <div class="hide"> Published in <strong>${item.Categories}</strong> </div> <div class="algolia-experts-items_div"> <div class="algolia-stats-cloneables_div"><div class="algolia-stats-icon_text"></div><div class="algolia-stats_text">${item['# of Templates']}</div></div> <div class="algolia-stats-cloneables_div"><div class="algolia-stats-icon_text"></div><div class="algolia-stats_text">${item['# of Cloneables']}</div></div> <div class="algolia-stats-cloneables_div"><div class="algolia-stats-icon_text"></div><div class="algolia-stats_text">${item['# of Tutorials']}</div></div> <div class="algolia-stats-cloneables_div"><div class="algolia-stats-icon_text"></div><div class="algolia-stats_text">${item['# of Code Snippets']}</div></div> </div> </div> </div> </a>`; }, noResults() { return "No posts for this query."; } }, getItemUrl({ item }) { return "/experts/" + item.Slug; }, }, { sourceId: "illustrations", getItems() { return getAlgoliaResults({ searchClient, queries: [ { indexName: 'illustrations', query, params: { attributesToSnippet: ['name:10', 'summary:35'], snippetEllipsisText: '…', hitsPerPage: 5 } } ] }); }, templates: { header({ items, html }) { return html`<span class="aa-SourceHeaderTitle">Illustrations</span> <div class="aa-SourceHeaderLine" />`; }, item({ item, components, html }) { return html`<a class="aa-ItemLink" href="/illustrations/${item.Slug}"> <div class="aa-ItemContent"> <div class="algolia-cloneables-image_div"> <a href="/templates/${item.Slug}"><img src="${item.Image}" class="algolia-template_image" /></a> </div> <div class="aa-ItemContentBody hide"> <div class="algolia-cloneables-title_text"> ${components.Snippet({ hit: item, attribute: 'Name', })} </div> <div class="hide"> Published in <strong>${item.Formats}</strong> </div> <div class="aa-ItemContentDescription text-style-3lines hide"> ${components.Snippet({ hit: item, attribute: 'Description', })} </div> </div> </div> </a>`; }, noResults() { return "No posts for this query."; } }, getItemUrl({ item }) { return "/illustrations/" + item.Slug; }, }, ]; } }); document.addEventListener('keydown', (event) => { if (event.metaKey && event.key.toLowerCase() === 'k') { setIsOpen(true); } }); </script> <style> /* Algolia */ .aa-Source[data-autocomplete-source-id='templates'] .aa-List { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0.5rem; } .aa-Source[data-autocomplete-source-id='templates'] .aa-Item { display: flex; flex-direction: column; justify-content: center; } .aa-Source[data-autocomplete-source-id='illustrations'] .aa-List { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0.5rem; } .aa-Source[data-autocomplete-source-id='illustrations'] .aa-Item { display: flex; flex-direction: column; justify-content: center; } .aa-Source {margin-top: 1.5rem; margin-bottom: 1.5rem;} .aa-SourceHeaderTitle {color: hsla(271.16883116883116, 64.71%, 46.67%, 1.00); font-size: 1.15rem; font-weight: 500;} .aa-ItemContentTitle {font-size:.875rem} .aa-SourceHeader {font-size:1.125rem; font-weight:600;} .aa-DetachedSearchButton {min-width: auto; margin-right: 0; padding: 12px 16px 12px 44px; border-color: #d6d6d6; background-image: url("https://global-uploads.webflow.com/61e46d66024d2ef28c3f257c/61ec775e4501442947de4f99_search.png"); background-position: 18px 50%; background-size: 15px 15px; background-repeat: no-repeat; background-attachment: scroll; min-height: 44px; margin-bottom: 0; border: 1px solid #d0d5dd; box-shadow: 1px 1px 2px 0 rgba(16,24,40,.05); font-size: 1rem; line-height: 1.5rem; border-radius: 6px; overflow: hidden; } .aa-DetachedSearchButtonIcon {display:none;} .aa-DetachedContainer {bottom: 3%;} .aa-PanelLayout aa-Panel--scrollable {max-height: var(--aa-detached-modal-max-height);} :root { --aa-overlay-color-rgb:115,114,129; --aa-overlay-color-alpha:0.95; --aa-panel-max-height: 100% !important; --aa-detached-modal-max-height: 100% !important; } </style>  <script> // Get the thumbs-up and thumbs-down elements const thumbsUp = document.querySelector('.thumbs-up-not-favorite'); const thumbsDown = document.querySelector('.thumbs-down-not-favorite'); // Get the thumbs wrappers const thumbsUpWrapper = document.querySelector('.jetboost-toggle-favorite-b92e'); const thumbsDownWrapper = document.querySelector('.jetboost-toggle-favorite-4q76'); // Function to add or remove the disabled class based on the condition function toggleDisabledClass(element, condition) { if (condition) { element.classList.add('disabled'); element.style.pointerEvents = 'none'; } else { element.classList.remove('disabled'); element.style.pointerEvents = 'auto'; } } // Watch for changes in the class of thumbs-up const thumbsUpObserver = new MutationObserver(() => { const isHideClassAdded = thumbsUp.classList.contains('jetboost-list-item-hide'); toggleDisabledClass(thumbsUpWrapper, isHideClassAdded); }); thumbsUpObserver.observe(thumbsUp, { attributes: true }); // Watch for changes in the class of thumbs-down const thumbsDownObserver = new MutationObserver(() => { const isHideClassAdded = thumbsDown.classList.contains('jetboost-list-item-hide'); toggleDisabledClass(thumbsDownWrapper, isHideClassAdded); }); thumbsDownObserver.observe(thumbsDown, { attributes: true }); </script> </body></html>