Troubleshooting Complianz Placeholder Issues: YouTube, Custom Images, and More

Placeholders are a crucial part of the 'Complianz – GDPR/CCPA Cookie Consent' plugin's functionality, providing a visual element where blocked content (like YouTube videos or embedded iframes) would normally appear. However, users often encounter issues where these placeholders don't display correctly, show generic images instead of specific ones, or cause layout problems. This guide covers the most common placeholder issues and their solutions.

Common Placeholder Problems and Solutions

1. YouTube Placeholder Not Showing or Generic Image Appears

Problem: YouTube-specific placeholders don't appear, showing only a generic fallback image instead.

Why it happens:

• The YouTube video might be set to private or unlisted, preventing Complianz from downloading its thumbnail.
• Lazy loading plugins (like LiteSpeed Cache) or optimization tools (like Autoptimize) might interfere with the placeholder loading process.
• The site might be password-protected during development, which can block Complianz from accessing YouTube's API.

Solutions:

• Ensure the YouTube video is publicly available.
• Whitelist Complianz scripts (e.g., complianz.min.js) in any optimization or caching plugins.
• Test with lazy loading temporarily disabled.
• If the issue persists only on a development site, test again when the site is live and publicly accessible.

2. Custom Placeholder Image Not Working

Problem: A custom uploaded placeholder image doesn't appear for a blocked service.

Why it happens:

• Incorrect file naming or folder location for the custom image.
• For YouTube specifically, the default integration might be overriding the custom placeholder.
• Caching plugins may be serving an old version of the page.

Solutions:

• For most services: Place your custom image in a folder named complianz-gdpr within your child theme's directory. The image should be named specifically for the service (e.g., youtube-minimal.jpg, calendly-minimal.jpg).
• For YouTube: You may need to disable the default YouTube integration (Complianz -> Integrations -> Services) and instead block YouTube manually in the Script Center (Complianz -> Integrations -> Script Center). This allows you to use a custom placeholder without interference.
• Clear all site and server caches after implementing changes.

3. Placeholder Causes Layout Issues

Problem: The placeholder classes (like cmplz-placeholder-1) are applied to a large container div instead of just the embedded content, messing up the page layout.

Why it happens: The plugin sometimes applies the placeholder styling to the parent container of the blocked content, which can affect other elements within that container.

Solutions:

• Try wrapping the specific content (e.g., the iframe) in a <div> element and applying the relevant blocking class (e.g., cmplz-block-ytprefs) to that wrapper instead of a larger container.
• Use custom CSS to override any unwanted styling applied by the placeholder classes.

4. No Placeholder Appears for a Blocked Script/Iframe

Problem: Content is successfully blocked, but no placeholder div is created at all.

Why it happens: This often occurs with more complex embeds (like certain Instagram feed plugins) where the same CSS class is used for both the configuration data and the element that gets blocked. The plugin might not correctly identify the element that needs a placeholder.

Solutions:

• Ensure the "Activate placeholder" and "Blocked content is an iframe" checkboxes are enabled for the script in the Script Center.
• If the problem is with a specific plugin's embed, you may need to experiment with different CSS selectors when blocking it in the Script Center.

5. Performance Concerns with Placeholder Images

Problem: Placeholder images are not optimized (e.g., not in next-gen formats like WebP) and are not lazy-loaded, potentially impacting page speed.

Why it happens: By default, placeholder images are set as CSS background images, which are not handled by most lazy-loading solutions. The default YouTube thumbnails are also served in standard formats like JPG or PNG.

Solutions:

• The 'Complianz – GDPR/CCPA Cookie Consent' team has indicated that WebP conversion for placeholders is in development.
• For now, you can manually create and use WebP images as custom placeholders by following the custom image method described above.

General Troubleshooting Steps

• Always clear cache: After making any changes in Complianz or uploading new placeholder images, clear your WordPress cache, browser cache, and any server-side cache.
• Conflict test: Temporarily disable other plugins (especially caching, optimization, and lazy loading plugins) to see if a conflict is causing the issue.
• Check for updates: Ensure both WordPress and the Complianz plugin are updated to their latest versions, as placeholder functionality is frequently improved.

By following these steps, you should be able to resolve the majority of placeholder-related issues. The 'Complianz – GDPR/CCPA Cookie Consent' team continuously works on improving placeholder functionality and compatibility with various themes and plugins.