iframe blocking

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

Frame Component (Recommended)

 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.