An embed displays Content from other websites like YouTube videos or 谷歌地图




嵌入使用一个 它们有着纵横比 which allows them to resize responsively based on their expected aspect ratio and not by using a single specified width or height.

Only Load After Interaction

包括一个 iframe embed directly will 汽车matically load all iframe Contents on page load which can drastically reduce the responsiveness of a page.

Semantic's embed combats this by not loading iframe Content until a user has interacted with 你的 embed's placeholder Content.

To give you an idea of how much file size including an embed will add to 你的 page load see the chart below

的 following are download estimates taken from firebug and a single sample embed. Individual results may vary.
网络 嵌入的大小
谷歌地图 237kb
YouTube 380kb
Vimeo 81kb



An embed can be used to display YouTube Content


An embed can be used to display Vimeo Content.


An embed can display any web Content

嵌入使用一个 intrinsic aspect ratios to embed Content responsively. Content will preserve their intrinsic aspect ratio for all browser sizes responsively



An embed can specify an alternative aspect ratio



Specifying a url will 汽车matically match to an embed source using the domain of the url.

$('.url.example .ui.嵌入”).嵌入();


Embed is designed to 汽车matically generate urls from Content ids. This way 你的 site's backend can store meaningful Content 元数据 and not worry about generating urls.

$('.Content.example .ui.嵌入”).嵌入();

Specifying Programmatically

You can also specify embed 设置 at run-time in the 设置 object.

$('.自定义.example .ui.嵌入”).嵌入({ 来源:“youtube”, id : 'O6Xo21L0ybE', 占位符:“/images/bear-waving.jpg” });


Embed comes with two predefined embed 来源, but can be extended with 自定义 来源. Each source specifies default 参数 and their mappings to 设置, 一个模板化的url, and what 图标 should be used for overlays

扩展 $.fn.embed.设置.来源 allows you to use other proprietary embeds.

/ /建在 $.fn.embed.设置.={来源 youtube: { 名称:“youtube”, 类型:“视频”, 图标:“视频播放”, 域:“”, url: / / {id}”, 参数: function(设置) { 返回{ 自动隐藏: !设置.显示UI, 播放:设置.自动播放, 颜色 : 设置.颜色| |定义, 总部 : 设置.hd, jsapi : 设置.api, modestbranding: 1 }; } }, vimeo: { 名称:“vimeo”, 类型:“视频”, 图标:“视频播放”, 域:“”, url: / / {id}”, 参数: function(设置) { 返回{ api:设置.api, 播放:设置.自动播放, 署名:设置.显示UI, 颜色:设置.颜色| |定义, 描述:设置.显示UI, 标题:设置.显示UI }; } } };


All the following behaviors can be called using the syntax:

$('.你的.元素”) .embed('behavior The名字', argumentOne, argumentTwo) ;
行为 描述
改变(来源、id、url) Changes iframe to a new Content source
重置 Removes embed and 显示s placeholder Content if available
显示 显示嵌入Content
隐藏 Hides embed Content and 显示s placeholder Content
得到id Returns current Content id
得到占位符 Returns placeholder image url
得到消息 返回源的名称
得到类型 返回源类型
获取url Returns URL with all 参数 added
有占位符 Returns whether embed Content 有占位符
摧毁 Destroys instance and removes all events

设置 to configure video behavior

设置 默认的 描述
图标 Specifies an 图标 to use with placeholder Content
source 指定要使用的源, if no source is provided it will be determined from the domain of a specified url.
url Specifies a url to use for embed
id Specifies an id value to replace with the {id} value found in templated urls
参数 Specify an object containing key/value pairs to add to the iframes GET 参数

设置 to configure video behavior

设置 默认的 描述
播放 汽车 默认设置 汽车 will only 播放 Content when a placeholder is specified. 设置 to 真正的 or 假 will force 播放.
color #444444 Specifies a default chrome color with Vimeo or YouTube.
url Specifies a url to use for embed
hd 真正的 Whether to prefer HD Content
brandedUI Whether to 显示 networks branded UI like title cards, or after video calls to action.


回调 specify a function to occur after a specific behavior.

参数 上下文 描述
onCreate url 美元的模块 Callback when iframe is generated
的情景 美元的模块 Whenever an iframe Contents is 显示n
on占位符Display 美元的模块 Callback immediately before Embed is removed from DOM
onEmbed 参数 美元的模块 Callback when module 参数 are determined. Allows you to adjust 参数 at run time by returning a new 参数 object.

DOM 设置 specify how this module should interface with the DOM

设置 默认的 描述
名称空间 embed 事件名称空间. Makes sure module teardown does not effect other events attached to an element.
选择器:{ 嵌入 : '.嵌入”, 占位符:“.占位符”, 玩 : '.玩的 }
DOM Selectors used internally
元数据:{ id : ' id”, 图标 : ' 图标”, 占位符:“占位符”, 来源:“源”, url : ' url的 }
HTML Data attributes used to store data
名称:{ 积极:“活跃”, 嵌入:“嵌入” }
Class The名字s used to attach style to state
$.fn.embed.设置.模板= { iframe: function(url, 参数) { // returns html for iframe }, placeholder: function(image, 图标) { // returns html for placeholder element } }
元数据:{ id : ' id”, 图标 : ' 图标”, 占位符:“占位符”, 来源:“源”, url : ' url的 }
错误:{ noURL : 'No URL specified', method : '的 method you called is not defined' }

Debug 设置 controls 调试 output to the console

设置 默认的 描述
The名字 Embed 调试日志的名称
沉默 Silences all console output including error messages, regardless of other 调试 设置.
调试 Provides standard 调试 output to console
性能 真正的 Provides standard 调试 output to console
详细的 真正的 Provides ancillary 调试 output to console


友情链接: 1 2 3 4 5 6 7 8 9 10