プロパティ
すべてのプロパティのデフォルト値は、グローバルに設定可能です。
プロパティ | タイプ | デフォルト | 説明 |
|---|---|---|---|
aspect | 文字列 | '16by9' | 埋め込みのアスペクト比。サポートされている値は '16by9'、'21by9'、'4by3'、および '1by1' で、CSSクラスに変換されます。詳細はドキュメントを参照してください。 |
tag | 文字列 | 文字列 | 'div' |
デフォルトタグの代わりにレンダリングするHTMLタグを指定します | 文字列 | type | 文字列 |
埋め込み
親要素の幅に基づいてレスポンシブなビデオまたはスライドショーの埋め込みを作成します。あらゆるデバイスでスケールする固有の比率を作成することで実現します。
ルールは、`<iframe>`、`<embed>`、`<video>`、および `<object>`要素に直接適用されます。
<div>
<b-embed
type="iframe"
aspect="16by9"
src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"
allowfullscreen
></b-embed>
</div>
<!-- b-embed.vue -->埋め込みタイプ
サポートされている埋め込みタイプは、`iframe`（デフォルト）、`video`、`embed`、および `object` です。これらは、標準のHTML `<iframe>`、`<video>`、`<embed>`、および `<object>` 要素に変換されます。
`type` プロパティを使用して、埋め込みのタイプを設定します。
アスペクト比
アスペクト比は、`aspect` プロパティを使用して設定できます。サポートされているアスペクト比は、`21by9`（21:9）、`16by9`（16:9）、`4by3`（4:3）、および `1by1`（1:1）です。デフォルトのアスペクトは `16by9` です。アスペクト比はBootstrapのSCSSで定義されており、クラス名 `embed-responsive-{aspect}`（例：`embed-responsive-16by9`、`embed-responsive-4by3` など）に変換されます。
ラッパー要素
レスポンシブ埋め込みは、レスポンシブなアスペクト比を強制するために、外部要素（デフォルトは `div`）でラップされます。このタグは `tag` プロパティを使用して変更できます。
属性と子要素
`<b-embed>` に提供される追加の属性（上記の `type`、`aspect`、および `tag` プロパティ以外）は、内部の埋め込み要素（`iframe`、`video`、`embed`、または `object`）に適用されます。
開始タグと終了タグ `<b-embed>` の間にある子要素は、内部の埋め込み要素内に配置されます。`iframe` タイプは子要素をサポートしていないことに注意してください。
例：HTML5 `<video>` のレスポンシブ埋め込み
<div>
<b-embed type="video" aspect="4by3" controls poster="poster.png">
<source src="dev-stories.webm" type="video/webm">
<source src="dev-stories.mp4" type="video/mp4">
</b-embed>
</div>関連項目
コンポーネントリファレンス
`<b-embed>`
関数型コンポーネント'iframe'
デフォルト
埋め込みに配置するコンテンツ
BEmbed
import { BEmbed } from 'bootstrap-vue'
Vue.component('b-embed', BEmbed)bootstrap-vue
次の名前付きエクスポートを介して、個々のコンポーネントをプロジェクトにインポートできます | コンポーネント |
|---|---|
このプラグインには、上記にリストされているすべての個々のコンポーネントが含まれています | <b-embed> |
BEmbed
import { EmbedPlugin } from 'bootstrap-vue'
Vue.use(EmbedPlugin)