Semantic-Org/Semantic-UI · error

No URL specified

Error message

No URL specified

What it means

The Embed module could not resolve a video URL. generate.embed() resolves the URL from settings.url, then the element's data-url metadata, then by combining a known source template (youtube/vimeo) with data-id; if all three are falsy it logs this via console.error and returns no iframe HTML, so the embed renders nothing.

Source

Thrown at src/definitions/modules/embed.js:618

  onDisplay            : function() {},
  onPlaceholderDisplay : function() {},
  onReset              : function() {},
  onCreate             : function(url) {},
  onEmbed              : function(parameters) {
    return parameters;
  },

  metadata    : {
    id          : 'id',
    icon        : 'icon',
    placeholder : 'placeholder',
    source      : 'source',
    url         : 'url'
  },

  error : {
    noURL  : 'No URL specified',
    method : 'The method you called is not defined'
  },

  className : {
    active : 'active',
    embed  : 'embed'
  },

  selector : {
    embed       : '.embed',
    placeholder : '.placeholder',
    icon        : '.icon'
  },

  sources: {
    youtube: {
      name   : 'youtube',
      type   : 'video',

View on GitHub (pinned to 597843ab84)

Solutions

  1. Add data-source and data-id (or data-url) to the element: <div class="ui embed" data-source="youtube" data-id="VIDEOID"></div>
  2. Pass url/id/source at init: $('.ui.embed').embed({source:'youtube', id:'VIDEOID'}) or {url:'//www.youtube.com/embed/VIDEOID'}
  3. If invoking imperatively, supply args: $('.ui.embed').embed('change', 'youtube', 'VIDEOID')

Example fix

// before
<div class="ui embed"></div>
// after
<div class="ui embed" data-source="youtube" data-id="2b2gSrFp8qE"></div>
Defensive patterns

Strategy: validation

Validate before calling

// Run before .embed(); ensure a URL can be resolved.
function embedHasSource($el, settings) {
  settings = settings || {};
  var hasUrl = !!settings.url || !!$el.attr('data-url');
  var hasSourceAndId = (!!settings.source || !!$el.attr('data-source'))
                    && (!!settings.id || !!$el.attr('data-id'));
  return hasUrl || hasSourceAndId;
}
if (!embedHasSource($('.ui.embed'))) {
  console.warn('embed: missing url or source+id');
} else {
  $('.ui.embed').embed();
}

Type guard

// Narrow an embed config to a valid one (url OR source+id present).
function isValidEmbedConfig(c) {
  if (!c || typeof c !== 'object') return false;
  if (typeof c.url === 'string' && c.url) return true;
  return (typeof c.source === 'string' && c.source)
      && (typeof c.id === 'string' || typeof c.id === 'number');
}

Try / catch

// Semantic UI logs to console.error (never throws), so wrap init to surface failure:
try {
  var $e = $('.ui.embed');
  if (!embedHasSource($e)) throw new Error('No URL specified');
  $e.embed();
} catch (err) {
  console.error('embed init failed:', err.message);
}

Prevention

When it happens

Trigger: Initializing embed on an element with no data-source+data-id, data-url, or matching settings: $('.ui.embed').embed() on <div class="ui embed"></div>. Also calling $('.ui.embed').embed('change') or ('create') without supplying source/id/url.

Common situations: Forgot the data-source/data-id attributes; customized metadata.url key so data-url isn't read; provided a source ('youtube') without an id; markup dropped during a refactor.

Related errors


AI-assisted analysis of Semantic-Org/Semantic-UI@597843ab84 (2026-08-13). Data as JSON: /api/errors/10b478d4828c55ae. Report an issue: GitHub.