Embed Blocker

4 min read Updated

The Embed Blocker Addon holds back embedded content from other sites, such as YouTube videos, Instagram posts and Google Maps, until the visitor agrees to load it. In place of each embed, the visitor sees a message with a link to that site’s privacy policy and an agree button. This helps you meet privacy laws such as the GDPR. Check your own legal needs; the addon is one part of that work.

Requirements

Go to SiteOriginPremium Addons and activate Embed Blocker.

Turn On Blocking

The addon blocks nothing until you enable a site.

  1. Go to SiteOriginPremium Addons.
  2. Find Embed Blocker and click Settings.
  3. In the sites table, open each site you want to block and select Enabled.
  4. Click Save.

The addon checks content that goes through the WordPress the_content filter, such as posts, pages and Page Builder layouts. It doesn’t check widget areas, such as sidebars and footers.

What Visitors See

Each blocked embed is hidden, and the block message shows in its place. When the visitor clicks the agree button, every embed from that site on the page loads. Embeds of the HTML Class type reload the page to load.

The visitor’s browser remembers the consent in a cookie named siteorigin-premium-content-blocker- plus a short site name, for example siteorigin-premium-content-blocker-youtube. Later pages then show that site’s embeds without the message. At the moment, the cookie expires after about 43 minutes. Also, when a visitor has agreed to more than one site, a later page unblocks only one of those sites.

Sites

The sites table lists each site with its Site label, Target (its URLs or class) and Status. Click Add to add a site. Use the icons on a row to open, duplicate or delete it.

The addon comes with these sites, all disabled: Google Maps Embed, Facebook iFrame, Facebook JavaScript SDK, Instagram, Reddit, SoundCloud, Spotify, TikTok, Twitter / X, Vimeo, YouTube and WP Go Maps.

Enabled
Block this site’s embeds.

Site Label
The site name. The [site] placeholder in the block message shows it.

Site URLs
The addresses to block, separated by commas. For example: player.vimeo.com. Shows for all types except HTML Class.

Class
The HTML class of the element to block, without the dot. For example: wpgmza_map. Shows only when Embed Type is HTML Class.

Privacy Policy Link
The URL of the site’s privacy policy. The [privacy_link] placeholder uses it. If you leave it empty, the message keeps the link text but removes the link.

Embed Type
The kind of element to block. Default: iFrame.

  • iFrame: an iframe whose source contains one of the Site URLs. YouTube, Vimeo and Google Maps embeds use this.
  • Blockquote: a blockquote embed and its script. Instagram, Reddit, TikTok and Twitter / X embeds use this.
  • Script: script tags whose source contains one of the Site URLs, such as the Facebook JavaScript SDK.
  • HTML Class: any element with the class in Class.

Message

Message Type
Build the message with TinyMCE, a text editor, or with a Layout Builder, a small Page Builder. Default: TinyMCE. This setting shows only when Page Builder is active.

Block Message
The message that shows in place of each blocked embed. The default message is:

[site]’s content is blocked. To view this content, you must agree to their privacy policy.
[button]

You can use these placeholders:

  • [site]: the Site Label.
  • [privacy_link]: the Privacy Policy Link. Use it as a link URL.
  • [button]: the agree button.

Design

Button

The agree button has the settings of the Button Widget, without Destination URL, Open in a new window and Download. Button Text defaults to “I Agree”, Button Color to #239cff, and Hover Background Color to #239cff at 80% opacity.

Container

Background Color
The message background. Default: black at 85% opacity.

Background Image
An image behind the message. The Background Color shows on top of it.

Border Color
Adds a 1px border in this color.

Border Radius
Default: 3px.

Padding
Default: 30px on each side.

Text

Font
The message font. By default, the theme font.

Color
Default: #ffffff.

Size
The text size. By default, the theme size.

Link Color
Default: #239cff.

Link Hover Color
Default: #239cff at 80% opacity.

Paragraph Margin Bottom
The space above and below each paragraph of the message, except the last. Default: 15px.

Advanced Customizations

When embeds load after consent, the addon triggers the siteorigin_embed_blocker_unblock event on the document. Use it to start scripts that need the embed. The data has siteSlug, the short site name used in the cookie, and onLoad, which is true when a saved consent loaded the embed with the page.

jQuery( document ).on( 'siteorigin_embed_blocker_unblock', function( event, data ) {
	if ( data.siteSlug === 'youtube' ) {
		// Start your YouTube code here.
	}
} );