菜单

嵌入层
嵌入层是显示其它网站内容,如YouTube视频或谷歌地图。

下载

什么时候使用

响应纵横比例 (Responsive Aspect Ratio)

嵌入层使用一种内在的纵横比可以调整基于预期的长宽比,而不是一个固定的宽度和高度。

交互后只加载 (Only Load After Interaction)

包含 iframe 的嵌入层,将直接自动加载所有iframe中的内容,从而大大减少页面响应时间。

Semantic 的嵌入层内容一开始不会加载,只有用户与占位符交互后才加载。

下面的表格展示了不同类型嵌入层尺寸。

下面的展示是从 firebug 测试出的嵌入层大小,个别结果可能会有所不同。
网络 嵌入层尺寸
Google Maps 237kb
YouTube 380kb
Vimeo 81kb

类型

YouTube

嵌入层可以展示 YouTube 的内容

Vimeo

嵌入层可以展示 Vimeo 的内容。

自定义内容 (Custom Content)

嵌入曾可以显示任何网站内容

嵌入层将使用一个内在比例响应式的嵌入内容,所有浏览器都兼容。

变形

纵横比 (Aspect Ratio)

嵌入可以指定一个纵横比

初始化

指定URL (Specifying a URL)

使用指定URL将自动匹配嵌入源。

$('.url.example .ui.embed').embed();

使用内容ID (Using Content IDs)

嵌入层设计为自动从ID匹配URL,这样你的网站的后端可以存储有意义的内容元数据,而不必担心生成网址。

$('.content.example .ui.embed').embed();

指定编程方式 (Specifying Programmatically)

还可以在设置对象中指定运行时的嵌入设置。

$('.custom.example .ui.embed').embed({ source : 'youtube', id : 'O6Xo21L0ybE', placeholder : '../images/bear-waving.jpg' });

指定新指定源 (Specifying New Sources)

嵌入层默认用了两种视频源地址,你可以自己设定其他的。比如:优酷

配置 $.fn.embed.settings.sources 可以让你使用其他的源地址

// built in $.fn.embed.settings.sources = { youtube: { name : 'youku', type : 'video', icon : 'video play', domain : 'youku.com', url : '//player.youku.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的值来替换模板中的 {id}
parameters false 指定包含 key/value 的对象。

视频设置
设置来配置视频行为

设置 默认 描述
autoplay auto 设置为 auto 将只在设置了占位符的时候自动播放,设置为 true 将强制自动, false 强制不自动。
color #444444 设置 Vimeo 或者 YouTube 的默认颜色。
url false 指定嵌入视频的URL
hd true 是否播放高清(HD)内容
brandedUI false 是否显示视频源品牌标题

回调函数

回调函数在行为发生后指定一个函数去执行

参数 语境 描述
onCreate url $module 当iframe创建时调用
onDisplay $module 不论iframe内容是否显示
onPlaceholderDisplay $module 在嵌入层从DOM移除后立即调用
onEmbed parameters $module 当确定模块参数时回调。允许您在运行时通过返回新参数对象来调整参数。

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) { // returns html for iframe }, placeholder: function(image, icon) { // returns html for placeholder element } }
metadata
metadata : { id : 'id', icon : 'icon', placeholder : 'placeholder', source : 'source', url : 'url' }
errors
error : { noURL : 'No URL specified', method : 'The method you called is not defined' }

调试设置
调试设置控制调试信息的输出

设置 默认 描述
name Embed 在调试日志中使用的名字
silent False 禁用所有信息输出,包括错误。
debug False 提供标准调试输出到控制台
performance True 提供标准调试输出到控制台
verbose True 提供辅助调试输出到控制台