C15T Logo

iframe blocking

Learn how to block iframes based on consent.

tocOn this page

Canary Feature

This feature is available in canary releases and may have breaking changes. Use with caution in production. Report issues on GitHub

Overview

Iframe blocking is a feature that allows you to block iframes based on consent. This is useful for blocking iframes that are not allowed to load until consent is given. This should be used when an iframe sets cookies such as a YouTube embed.

c15t provides two ways to block iframes:

  • Headless: This is a headless implementation that does not render any DOM elements. It only manages the src/data-src attributes of existing iframe elements.
  • Frame Component (React only): This is a React component that conditionally renders content and provides a pre-built/customizable placeholder providing great UX. Learn more about the Frame component
 export default function App() {
   return (
     <>
       <Frame category="marketing" style={{ width: '500px', height: '500px' }}>
         <iframe
           title="Cool Duck Video"
           src="https://www.youtube.com/embed/mQJ6q1ZCzsg"
           width="100%"
           height="100%"
         />
       </Frame>
     </>
   );
 };

Headless Usage

// Will render immediately - No blocking
<iframe src="https://youtube.com/embed/unblocked" />

// Does not render until consent is granted
<iframe data-src="https://youtube.com/embed/123" data-category="marketing" />

Info

The iframe blocker will only block iframes that have a data-category & data-src attribute.

No fallback is provided for blocked iframes using this method.