Front-End Optimization: Lazyload iFrame Embeds

Link: https://support.brilliantdirectories.com/support/solutions/articles/12000106650

The Front-End Optimization: Lazyload iframe Embeds setting controls how embedded video and media iframes load on the website. When this optimization is enabled, the system intelligently delays iframe loading to improve PageSpeed metrics and overall site performance. For YouTube videos specifically, the system loads only a lightweight thumbnail instead of the full player on initial page load. For other supported platforms like Vimeo, Spotify, and social media embeds, the iframe content loads only when visitors scroll to it.

Where to Find This Setting

This setting is available in the Admin Panel and can be enabled with one click. It applies site-wide to all supported iframe embeds across the front end of the website.

  • Navigate to Settings > Advanced Settings.
  • Select the Global tab.
  • Scroll to the Optimization section.
  • Enable Front-End Optimization: Lazyload iframe Embeds.

System Variable: lazyload_iframe_embed
Default Value: OFF



Advanced Settings: Supported Domains

A second setting under the Advanced tab allows you to control which iframe providers are lazy loaded. This setting is a comma-separated list of domain names.

  • Navigate to Settings > Advanced Settings.
  • Select the Advanced tab.
  • Scroll to the Optimization section.
  • Edit Front-End Optimization: Lazyload iframe Embeds - Supported Domains.

System Variable: lazyload_iframe_domains
Default Value: brightcove, dailymotion, embedly, facebook.com, giphy, imgur, instagram.com, jwplatform, khanacademy, linkedin.com, loom, pinterest.com, podcasts.apple, reddit, rumble, soundcloud, spotify.com, streamable, ted.com, tiktok, twitch, twitter.com, udemy, vimeo, vidyard, wistia, x.com, youtube



Customizing the Supported Domains List

You can add or remove providers from this list to control which iframes are lazy loaded:

  • Domains should be entered in lowercase without protocols (e.g., vimeo not https://vimeo.com).
  • Multiple domains should be separated by commas.
  • Removing a domain (like youtube) will disable lazy loading for that provider entirely.
  • Adding a new domain will enable lazy loading for custom iframe providers.
  • Trailing commas, extra spaces, and duplicate entries are automatically cleaned up.

Behavior When the Setting Is OFF

When this setting is turned OFF, each embedded iframe loads its full content immediately. This behavior can increase the total page weight and load time, especially on pages that contain several iframe embeds.

  • The full iframe, scripts, and network requests load on page load.
  • Resource usage increases as more iframes are embedded on a single page.
  • Browser performance may be affected on slower devices or mobile connections.
  • YouTube videos load their complete player and scripts immediately.

Behavior When the Setting Is ON

When the lazy load feature is enabled, embedded iframes behave differently on the front end to help improve loading speed and reduce unnecessary network requests. The system uses two different approaches depending on the provider type.

YouTube Videos (Thumbnail-Based Lazy Loading)

  • Only the video thumbnail loads first, not the full player.
  • The full YouTube player loads only after the visitor clicks the thumbnail.
  • A play button overlay appears on the thumbnail for clear visual feedback.
  • Visitors still experience the video normally once they click to play.
  • Thumbnails above the fold load right away; thumbnails further down load when the user scrolls toward them.
  • Initial YouTube branding and controls are not displayed until the video is initialized.

Other Providers (Scroll-Based Lazy Loading)

For other supported platforms like Vimeo, Spotify, SoundCloud, social media embeds, and audio players, the lazy loading works invisibly:

  • The iframe's loading is blocked on initial page load.
  • The space for the iframe is reserved to prevent layout shift.
  • When the visitor scrolls near the iframe location (within 200 pixels), the content loads automatically.
  • No thumbnail or play button is displayed—the full embed appears when loaded.
  • Visitors experience these embeds normally without needing to click anything.

Supported Platforms

The following platforms are supported by default when lazy loading is enabled. All can be customized via the Supported Domains setting.

Video Platforms

  • YouTube (with thumbnail preview)
  • Vimeo
  • Wistia
  • Dailymotion
  • TikTok
  • Twitch
  • Loom
  • Facebook Video
  • Instagram Video
  • Brightcove
  • JW Player
  • Vidyard
  • Rumble
  • Streamable
  • TED Talks
  • Khan Academy
  • Udemy

Audio Platforms

  • Spotify
  • SoundCloud
  • Apple Podcasts

Social Media Embeds

  • Twitter / X
  • LinkedIn
  • Pinterest
  • Reddit

Media Aggregators

  • Embedly
  • Giphy
  • Imgur

Where Lazy Loading Applies

Once the setting is ON, lazy loading applies to all supported iframe embeds across the entire site wherever standard embed code is used.

  • Iframes inserted into custom HTML blocks or widgets.
  • Video URLs embedded using the Froala video tool, which automatically converts URLs into embed codes.
  • Embeds on static pages, post pages, homepage widgets, and sidebar modules.
  • Social media embeds added via iframe code.
  • Audio players embedded via iframe code.

The lazy load feature does not apply to the following:

  • Iframes from domains not included in the Supported Domains list.
  • Payment gateways or checkout iframes (Stripe, PayPal, etc.).
  • Authentication or security-related iframes.
  • Videos used as CSS background videos.
  • Iframes without a src attribute.

Admin View vs. Front-End View

The video and iframe editing experience differs slightly between the Admin Panel and the live front end to ensure a smooth editing workflow.

  • In the Froala editor, admins always see the full embed with standard controls.
  • The lazy load optimization is applied only to the public-facing version of the page.
  • This ensures admins can preview and test embeds without interference from the lazy loading system.

Special URL Parameters for Embeds

Embed URLs can include optional parameters to adjust how individual iframes behave. These parameters are added to the end of the embed URL and can enable, disable, or modify lazy loading behavior for specific embeds.

  • Parameters can be added after the video or embed ID in the URL.
  • Multiple parameters can be combined using &.

Available URL Parameters

The table below lists the supported parameters and describes how each option affects lazy loading and playback behavior.

BehaviorLazy Load UsedParameter(s)Example URL EndingDescription
Regular Lazy LoadYes(none)/embed/VIDEO-IDYouTube: Loads thumbnail only. Others: Load when scrolled into view. Normal behavior.
Lazy Load, Muted on Play (YouTube)Yesmute=1/embed/VIDEO-ID?mute=1Loads the thumbnail. When clicked, the video begins playing muted until the visitor unmutes it.
Skip Lazy LoadNonolazy=1/embed/VIDEO-ID?nolazy=1Always loads the full iframe immediately, even when lazy load is enabled globally. Works for all providers.
Skip Lazy Load, Muted (YouTube)Nonolazy=1&mute=1/embed/VIDEO-ID?nolazy=1&mute=1Loads the full player on page load but starts playback muted.
Autoplay with Lazy Load SkippedNoforceplay=1/embed/VIDEO-ID?forceplay=1Loads the full player immediately and autoplays the video muted on page load. Useful for background videos. Works for all providers.

Notes and Considerations

The lazy load feature is designed to help reduce unnecessary iframe loading, improve initial page speed, and make sites feel faster and more responsive. The points below provide additional context about how the feature behaves on different types of content.

  • Multiple iframes on the same page are fully supported, each loading independently.
  • Iframes located lower on the page load only when scrolled into view (within 200 pixels).
  • Autoplaying videos must remain muted by browser policy and can use the forceplay=1 parameter.
  • HTML-based background videos can use parameters to start automatically if needed.
  • YouTube thumbnails are fetched from YouTube's CDN and are highly optimized for speed.
  • Non-YouTube iframes maintain their original dimensions to prevent layout shift during loading.
  • All lazy-loaded iframes include accessibility titles for screen readers.
  • The system is designed to fail silently—if an error occurs, iframes load normally without breaking the page.

Frequently Asked Questions

The following short FAQs provide additional clarity about how lazy loading works and when it is most helpful.

Does lazy loading help with PageSpeed?

Yes. By delaying heavy iframe scripts and network requests until needed, lazy loading can reduce initial render time and lower total blocking resources. This often leads to improved PageSpeed and Core Web Vitals scores, especially for LCP (Largest Contentful Paint).

Will lazy loading change how embeds appear?

For YouTube videos, visitors see a thumbnail in place of the player until they click, and after clicking the video behaves exactly like a normal YouTube embed. For other platforms, visitors see the embed appear when they scroll to it, with no visual difference once loaded.

Do existing embeds need to be updated?

No. Standard iframe embed codes automatically benefit from lazy loading once the setting is enabled. URL parameters are optional and only needed for custom behavior like skipping lazy load or forcing autoplay.

Can I lazy load only certain platforms?

Yes. Edit the Supported Domains list in Advanced Settings to add or remove specific providers. For example, removing youtube will disable lazy loading for YouTube while keeping it enabled for other platforms.

What happens if I add a domain not in the default list?

You can add custom iframe domains to the Supported Domains list. As long as the domain uses standard iframe embeds, the lazy loading will apply. Be cautious with payment gateways or authentication iframes—these should not be lazy loaded.

Why does YouTube get a thumbnail but other platforms don't?

YouTube provides a publicly accessible thumbnail API that allows us to show a preview image before loading the video. Other platforms don't offer this feature, so we use scroll-based lazy loading instead, which still significantly improves performance by delaying the iframe load.

Can I force an iframe to always load immediately?

Yes. Add ?nolazy=1 (or &nolazy=1 if other parameters exist) to the embed URL. This will skip lazy loading for that specific iframe even when the global setting is enabled.

Does this work with Embedly or other iframe wrapper services?

Yes. Embedly is included in the default Supported Domains list. When an Embedly iframe is lazy loaded, all content inside it (including nested iframes) is also delayed, providing performance benefits.

Will this break any functionality?

No. The lazy loading system is designed with multiple failsafe mechanisms. If any error occurs during processing, the iframe loads normally. Payment gateways, authentication flows, and critical business iframes should be excluded from the Supported Domains list as a best practice.