Custom Watermarks
Add a text or image watermark overlay to any embedded iFrame in Elementor and Gutenberg using Custom iFrame Pro.
Overview
Custom iFrame Custom Watermarks let you place a text label or logo overlay on top of any embedded iFrame. Use watermarks for branding, white-label client demos, or to mark embedded content as belonging to your site.
Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.
Custom Watermarks is a Pro feature. It requires Custom iFrame Pro (Starter, Studio, or Agency plan). View pricing — plans start at $29 one-time.
Requirements
- Custom iFrame Free plugin installed and active
- Custom iFrame Pro plugin installed and active
- WordPress with Elementor or the Gutenberg block editor
How the Watermark Works
The watermark is an overlay element placed on top of the iFrame. It does not modify the embedded website in any way. The embedded content remains untouched. This means:
- No cross-domain restrictions
- Works on all embed types: video, documents, maps, forms, websites
- The watermark persists regardless of what the embedded page shows
Watermark Types
Text watermark: A plain-text label. Use for website names, product names, or attribution text. Full typography, color, and opacity control.
Image watermark: A logo or custom icon uploaded from your media library. Use for brand marks and visual identities.
How to Add a Watermark
In Elementor
Open your page in Elementor
Go to the page with the Custom iFrame widget. Click Edit with Elementor.
Enable the Watermark
Select the widget. In the Content tab, scroll to the Watermark section. Toggle Enable Watermark to Yes. More options appear.
Choose Text or Image
Set Watermark Type to Text or Image.
For Text: Enter your label. Choose a Position: Top Left, Top Right, Bottom Left, or Bottom Right.
For Image: Upload your logo from the media library. Choose a position.
Style the watermark
Switch to the Style tab. Open the Watermark section. Adjust font family, size, weight, color, and opacity for text watermarks. Adjust size and opacity for image watermarks.
Publish
Click Update or Publish. The watermark is now live on the embedded content.
In Gutenberg
Open your page in the block editor
Go to the page with the Custom iFrame block. Click Edit.
Enable the Watermark
Select the block. In the right panel, scroll to the Watermark section and toggle it on. More options appear.
Choose Text or Image
Choose the watermark type.
For Text: Enter your brand text. Choose a position.
For Image: Upload your logo from the media library. Choose a position.
Publish
Click Update or Publish. The watermark is now live.
The watermark is live. It appears over the embedded content on every page load.
Watermark Position Options
| Position | Common use case |
|---|---|
| Top Left | Channel branding, site attribution |
| Top Right | Logo mark, product name |
| Bottom Left | Copyright notice, URL |
| Bottom Right | Most common placement for logo watermarks |
Style Tips
- Opacity: A slightly transparent watermark (50–70%) looks professional without blocking content.
- Color: Choose a color that contrasts with the embedded content but does not draw excessive attention.
- Font size: Keep text watermarks small (12–16px) for a subtle brand presence.
- PNG with transparency: Use a PNG logo with a transparent background for the cleanest image watermark result.
FAQ
No. The watermark is an overlay on top of the iFrame element. The embedded website remains untouched. This avoids cross-domain and browser security restrictions.
Yes. The watermark appears on top of any embed type including YouTube videos, Vimeo players, PDFs, maps, and external websites.
The watermark renders in the DOM above the iFrame. A visitor using developer tools could hide it client-side, but this does not affect other visitors. The watermark is for branding, not copy protection.
Yes. Both are independent Pro features. Enable both on the same widget or block to show branded content inside a device mockup.
Related Guides
Last updated today
Built with Documentation.AI