Generic Fallback

<o-embed> is a universal embed tag. Any valid HTTP or HTTPS URL renders as an iframe — known providers get smart defaults (dimensions, permissions, aspect ratios), while unrecognized URLs fall back to a sandboxed iframe. This makes <o-embed> useful even for platforms that are not built-in providers.

How it works

When you pass a URL to <o-embed>:

  1. The component checks each registered provider’s canParseUrl() method
  2. If a provider matches, the URL is processed through the full pipeline (detect → extract → build → render) with provider-specific defaults
  3. If no provider matches, the component checks isValidUrl() from @social-embed/lib
  4. If the URL is a valid HTTP/HTTPS URL, it renders as a plain <iframe> with security restrictions

Security attributes

Generic fallback iframes are sandboxed to limit their capabilities:

AttributeValueEffect
sandboxallow-scripts allow-same-origin allow-popupsAllows JavaScript, same-origin access, and popups. Blocks forms, top-level navigation, and other capabilities.
referrerpolicyno-referrerPrevents the embedded page from seeing which page embedded it.
allowfullscreen(not set)Fullscreen is not enabled for generic embeds, unlike provider-specific ones.

Library vs component behavior

@social-embed/lib and @social-embed/wc handle unrecognized URLs differently:

PackageUnrecognized URL behavior
@social-embed/libconvertUrlToEmbedUrl() returns "". getProviderFromUrl() returns undefined.
@social-embed/wcRenders the URL as a sandboxed <iframe> with the security attributes above.

This means the library is strict (no match = no output) while the component is permissive (no match = generic iframe). When building server-side validation, use the library’s behavior as the allowlist.

Limitations

Some sites prevent iframe embedding via HTTP headers:

  • X-Frame-Options: DENY or SAMEORIGIN — The browser will refuse to render the page in an iframe
  • Content-Security-Policy: frame-ancestors 'none' — Same effect via CSP

The generic fallback cannot work around these restrictions. If an embedded site blocks framing, the iframe will show an error or blank page.

Examples

Basic

URL: https://netlify.com

<o-embed url="https://netlify.com/"></o-embed>

Styled

<style>
  o-embed.full {
    --social-embed-iframe-height: 100%;
    --social-embed-iframe-width: 100%;
    width: 100%;
    height: 450px;
  }
</style>
<o-embed url="https://en.wikipedia.org" class="full"></o-embed>