1ページに1つ以下の小さな広告のみ表示することをお約束します。このメッセージを非表示にしても、再び表示されることはありませんのでご安心ください。
使用法
レスポンシブアスペクト比
埋め込みに使用される固有のアスペクト比により、単一の指定された幅や高さを使用するのではなく、予期されるアスペクト比に基づいてレスポンシブにサイズ変更できます。
インタラクション後にのみロード
iframe埋め込みを直接追加すると、ページの読み込み時にすべてのiframeコンテンツが自動的にロードされ、ページのレスポンスが大幅に低下する可能性があります。
SemanticUIの埋め込み機能は、ユーザーが埋め込みのプレースホルダーコンテンツを操作するまでiframeコンテンツをロードしないことで、これを解決します。
埋め込みをページのロードに追加することでどの程度のファイルサイズが追加されるかについては、以下のグラフをご覧ください。
| ネットワーク | 埋め込みサイズ |
|---|---|
| Google Maps | 237 KB |
| YouTube | 380 KB |
| Vimeo | 81 KB |
タイプ
バリエーション
初期化
URLの指定
URLを指定すると、URLのドメインを使用して埋め込み元が自動的に一致します。
$('.url.example .ui.embed').embed();
コンテンツIDの使用
埋め込みはコンテンツIDからURLを自動的に生成するように設計されています。そうすることで、サイトのバックエンドは意味のあるコンテンツメタデータを保存し、URLを生成することについて心配する必要はありません。
$('.content.example .ui.embed').embed();
プログラムによる指定
実行時に設定オブジェクトで埋め込み設定を指定することもできます。
$('.custom.example .ui.embed').embed({ source : 'youtube', id : 'O6Xo21L0ybE', placeholder : '/images/bear-waving.jpg' });
新しいソースの指定
埋め込みには2つの定義済みの埋め込みソースがありますが、カスタムソースで拡張できます。各ソースは、デフォルトパラメーターとその設定へのマッピング、テンプレート付き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('動作名', argumentOne, argumentTwo) ;
| 動作 | 説明 |
|---|---|
| change(ソース, 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 | テンプレート化された URL に含まれる {id} 値を置き換える ID 値を指定します |
| parameters | false | iframe の GET パラメーターに追加するキー/値のペアを含むオブジェクトを指定します |
ビデオ設定ビデオの動作を設定する設定
| 設定 | 既定値 | 説明 |
|---|---|---|
| autoplay | auto | 既定の設定 auto では、プレースホルダーが指定されている場合にのみ自動再生されます。true または false に設定すると、強制的に自動再生されます。 |
| color | #444444 | Vimeo または YouTube で既定の Chrome の色を指定します |
| url | false | 埋め込みに使用する URL を指定します |
| hd | true | HD コンテンツを優先するかどうか |
| brandedUI | false | タイトルカードや動画の最終的な呼び出しなどの、ネットワークのブランド化された UI を表示するかどうか |
コールバック
コールバックは、特定の動作の後に発生する関数を指定します。
| パラメーター | コンテキスト | 説明 | |
|---|---|---|---|
| onCreate | url | $module | iframe が生成されたときのコールバック |
| onDisplay | $module | iframe のコンテンツが表示されるたびに | |
| onPlaceholderDisplay | $module | Embed が DOM から削除される直前のコールバック | |
| onEmbed | parameters | $module | モジュールパラメーターが決定されたときのコールバック。実行時に新しいパラメーターオブジェクトを返すことで、パラメーターを調整できます。 |
DOM の設定DOM の設定は、このモジュールが DOM とどのようにインターフェイスすべきかを指定します
| 設定 | 既定値 | 説明 |
|---|---|---|
| namespace | embed | イベントの名前空間。モジュールの削除が要素に添付された他のイベントに影響を与えないようにします |
| selector |
セレクター : { embed : '.embed', placeholder : '.placeholder', play : '.play' }
|
内部的に使用される DOM セレクター |
| metadata |
メタデータ: { id: 'id', icon: 'icon', placeholder: 'placeholder', source: 'source', url: 'url' }
|
HTMLでデータ格納に使う data 属性 |
| className |
className: { active: 'active', embed: 'embed' }
|
状態にスタイルを適用するためのクラス名 |
| テンプレート |
$.fn.embed.settings.templates = { iframe: function(url, parameters) { // iframe の html を返す }, placeholder: function(image, icon) { // プレースホルダー要素の html を返す } }
|
|
| metadata |
メタデータ: { id: 'id', icon: 'icon', placeholder: 'placeholder', source: 'source', url: 'url' }
|
|
| エラー |
error: { noURL: 'URL が指定されていません', method: '呼び出そうとしたメソッドが定義されていません' }
|
|
デバッグ設定デバッグ設定はコンソールへのデバッグ出力を制御します
| 設定 | 既定値 | 説明 |
|---|---|---|
| name | 埋め込み | デバッグログで使用される名前 |
| silent | False | エラーメッセージを含むすべてのコンソール出力を停止します。他のデバッグ設定に関係ありません。 |
| debug | False | コンソールへの標準デバッグ出力を提供します |
| performance | True | コンソールへの標準デバッグ出力を提供します |
| verbose | True | コンソールへの補助的なデバッグ出力を提供します |