我们承诺每页只显示一个小型广告。别担心，隐藏此消息将确保你不会再次被烦扰。
何时使用
响应式纵横比
嵌入使用 固有纵横比，这使它们能够根据其预期纵横比进行响应式调整大小，而不是使用单个指定的宽度或高度。
仅在交互后加载
直接包含 iframe 嵌入将自动在页面加载时加载所有 iframe 内容，这会大大降低页面的响应速度。
Semantic 的嵌入通过在用户与你的嵌入占位符内容交互之前不加载 iframe 内容来解决这个问题。
为了让你了解包含嵌入将为你的页面加载添加多少文件大小，请查看下面的图表
| 网络 | 嵌入大小 |
|---|---|
| Google 地图 | 237kb |
| YouTube | 380kb |
| Vimeo | 81kb |
类型
变体
初始化
指定 URL
指定 url 将自动使用 url 的域匹配到嵌入源。
$('.url.example .ui.embed').embed();
使用内容 ID
Embed 旨在从内容 ID 自动生成 url。这样，你的网站后端就可以存储有意义的内容元数据，而不用担心生成 url。
$('.content.example .ui.embed').embed();
以编程方式指定
你也可以在运行时在设置对象中指定嵌入设置。
$('.custom.example .ui.embed').embed({ source : 'youtube', id : 'O6Xo21L0ybE', placeholder : '/images/bear-waving.jpg' });
指定新的源
Embed 带有两个预定义的嵌入源，但可以用自定义源进行扩展。每个源都指定了默认参数及其映射到设置、模板化 url 以及应用于叠加层的图标
扩展 $.fn.embed.settings.sources 允许你使用其他专有嵌入。
// 内置 $.fn.embed.settings.sources = { youtube: { name : 'youtube', type : 'video', icon : 'video play', domain : 'youtube.com', url : '//www.youtube.com/embed/{id}', parameters: function(settings) { return { autohide : !settings.showUI, autoplay : settings.autoplay, color : settings.colors || undefined, hq : settings.hd, jsapi : settings.api, modestbranding : 1 }; } }, vimeo: { name : 'vimeo', type : 'video', icon : 'video play', domain : 'vimeo.com', url : '//www.youtube.com/embed/{id}', parameters: function(settings) { return { api : settings.api, autoplay : settings.autoplay, byline : settings.showUI, color : settings.colors || undefined, portrait : settings.showUI, title : settings.showUI }; } } };
行为
所有以下行为都可以使用以下语法调用
$('.your.element') .embed('behavior name', argumentOne, argumentTwo) ;
| 行为 | 描述 |
|---|---|
| change(source, id, url) | 将 iframe 更改为新的内容源 |
| reset | 删除嵌入，如果可用，则显示占位符内容 |
| show | 显示嵌入内容 |
| hide | 隐藏嵌入内容并显示占位符内容 |
| get id | 返回当前内容 ID |
| get placeholder | 返回占位符图像 URL |
| get sources | 返回源名称 |
| get type | 返回源类型 |
| get url | 返回包含所有参数的 URL |
| has placeholder | 返回嵌入内容是否具有占位符 |
| destroy | 销毁实例并删除所有事件 |
嵌入设置用于配置视频行为的设置
| 设置 | 默认值 | 描述 |
|---|---|---|
| icon | false | 指定要与占位符内容一起使用的图标 |
| source | false | 指定要使用的源，如果未提供源，则将根据指定 url 的域确定。 |
| url | false | 指定要用于嵌入的 url |
| id | false | 指定一个 ID 值以替换在模板化 url 中找到的 {id} 值 |
| parameters | false | 指定一个包含键/值对的对象，以添加到 iframes 的 GET 参数 |
视频设置用于配置视频行为的设置
| 设置 | 默认值 | 描述 |
|---|---|---|
| autoplay | auto | 默认设置 auto 仅在指定占位符时才会自动播放内容。设置为 true 或 false 将强制自动播放。 |
| color | #444444 | 在 Vimeo 或 YouTube 中指定默认的镀铬颜色。 |
| url | false | 指定要用于嵌入的 url |
| hd | true | 是否优先选择高清内容 |
| brandedUI | false | 是否显示网络的品牌化 UI，如标题卡或视频后的号召性用语。 |
回调
回调指定在特定行为之后发生的函数。
| 参数 | 上下文 | 描述 | |
|---|---|---|---|
| onCreate | url | $module | iframe 生成时的回调 |
| onDisplay | $module | 每当显示 iframe 内容时 | |
| onPlaceholderDisplay | $module | 在 Embed 从 DOM 中删除之前的回调 | |
| onEmbed | parameters | $module | 在确定模块参数时的回调。允许你在运行时通过返回新的参数对象来调整参数。 |
DOM 设置DOM 设置指定此模块应如何与 DOM 交互
| 设置 | 默认值 | 描述 |
|---|---|---|
| namespace | embed | 事件命名空间。确保模块拆卸不会影响附加到元素的其他事件。 |
| selector |
selector : { embed : '.embed', placeholder : '.placeholder', play : '.play' }
|
内部使用的 DOM 选择器 |
| metadata |
metadata : { id : 'id', icon : 'icon', placeholder : 'placeholder', source : 'source', url : 'url' }
|
用于存储数据的 HTML 数据属性 |
| className |
className : { active : 'active', embed : 'embed' }
|
用于将样式附加到状态的类名 |
| templates |
$.fn.embed.settings.templates = { iframe: function(url, parameters) { // 返回 iframe 的 html }, placeholder: function(image, icon) { // 返回占位符元素的 html } }
|
|
| metadata |
metadata : { id : 'id', icon : 'icon', placeholder : 'placeholder', source : 'source', url : 'url' }
|
|
| errors |
error : { noURL : '未指定 URL', method : '你调用的方法未定义' }
|
|
调试设置调试设置控制对控制台的调试输出
| 设置 | 默认值 | 描述 |
|---|---|---|
| name | 嵌入 | 调试日志中使用的名称 |
| silent | False | 使所有控制台输出（包括错误消息）静音，无论其他调试设置如何。 |
| debug | False | 向控制台提供标准的调试输出 |
| performance | True | 向控制台提供标准的调试输出 |
| 详细 | True | 向控制台提供辅助调试输出 |