YouTube Click Before View (Bludit Plugin)

This plugin replaces YouTube embeds (via shortcode) with a privacy-friendly click-to-load placeholder. The actual YouTube embed is only loaded after an explicit user click (optionally using youtube-nocookie.com).

Screenshots

Features

• Click-to-load instead of immediate YouTube embed (no requests to YouTube until clicked)
• Optional youtube-nocookie.com domain
• Custom notice heading + optional additional text
• Customizable button label
• Optional background image (preview) inside the placeholder
• Configurable placeholder height and overlay strength
• CSS/JS are only injected when the current page actually contains a video wrapper

Requirements

• Bludit 3.x (tested with 3.14.1)

Installation

1. Copy the folder youtube-click-to-load into bl-plugins/.
2. In the backend go to Settings -> Plugins and activate the plugin.

Backend / Settings

• Direct link: https://YOUR-DOMAIN/admin/configure-plugin/pluginYoutubeClickToLoad
• The plugin adds a link to the admin sidebar for quick access to the settings.

Configuration options

Field	Description
enablePages	Enable on pages
enablePosts	Enable on posts/home
useNoCookieDomain	Uses youtube-nocookie.com instead of youtube.com
placeholderText	Heading above the notice text in the placeholder
belowButtonText	Additional text (optional) in the placeholder
buttonText	Label of the load button
wrapperClass	Additional CSS class(es) for the wrapper (base class is always applied)
backgroundImage	Optional background image for the placeholder (<img> inside the wrapper)
wrapperHeight	Placeholder height in pixels
overlayStrength	Overlay strength from 0 to 1

Note: The additional text belowButtonText is currently rendered below the heading and above the button.

Usage (Shortcode)

In the content of a page / post:

• [youtube VIDEO_ID]
• [youtube id=VIDEO_ID]
• [youtube id="VIDEO_ID"]

Example:

[youtube dQw4w9WgXcQ]

How it works (technical overview)

1. beforeSiteLoad() searches the rendered content for the shortcode and replaces it with a wrapper.
2. The wrapper includes data attributes such as data-youtube-id, data-youtube-embed-base, data-yt-height, data-yt-overlay.
3. siteHead() injects assets only when needed (when wrappers were found):
   • css/youtube-click-to-load.css
   • js/youtube-click-to-load.js
4. On button click, the script creates an <iframe> and replaces the placeholder content.

CSS / Customizing

Base classes:

• .yt-privacy-wrapper (always applied)
• .yt-privacy-inner, .yt-privacy-text, .yt-privacy-note, .yt-privacy-button, .yt-privacy-iframe
• .yt-privacy-bg (only when backgroundImage is set)

CSS variables (set by JS from data-yt-*):

• --yt-wrapper-height (e.g. 400px)
• --yt-overlay-strength (e.g. 0.55)

Example (theme CSS):

.yt-privacy-wrapper {
  border-radius: 12px;
}
.yt-privacy-button {
  background: #111;
}
.yt-privacy-button:hover {
  background: #333;
}

Privacy notes

• Without a click, no YouTube embeds are loaded; therefore there are typically no YouTube requests / third-party cookies triggered by the embed.
• With a click, the video is loaded as an embed. Using youtube-nocookie.com enables the "enhanced privacy mode", but it does not replace legal review.

Security note (backend inputs)

• placeholderText and belowButtonText are processed via a decode helper during rendering. This can allow HTML output if you store HTML in these fields.
• In most setups only admins can access plugin settings; still, only use trusted code/HTML in these fields.

Project structure

.
├─ plugin.php
├─ metadata.json
├─ languages/
│  ├─ de_DE.json
│  └─ en.json
├─ view/
│  └─ dashboard.php
├─ css/
│  └─ youtube-click-to-load.css
└─ js/
   └─ youtube-click-to-load.js

License

MIT License (see metadata.json and the license text in the class PHPDoc in plugin.php).