4cd4fd28
 郭伟龙
feat: 初始化项目
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
# Embed
> Create responsive video or slideshow embeds based on the width of the parent by creating an
> intrinsic ratio that scales on any device.
Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<object>` elements
```html
<div>
<b-embed
type="iframe"
aspect="16by9"
src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"
allowfullscreen
></b-embed>
</div>
<!-- b-embed.vue -->
```
## Embed types
Supported embed types are `iframe` (default), `video`, `embed` and `object`, which translate to the
standard HTML `<iframe>`, `<video>`, `<embed>` and `<object>` elements.
Set the type of embed you would like via the `type` prop.
## Aspect ratios
Aspect ratios can be set via the `aspect` prop. Supported aspect ratios are: `21by9` (21:9), `16by9`
(16:9), `4by3` (4:3) and `1by1` (1:1). The default aspect is `16by9`. Aspect ratios are defined in
Bootstrap's SCSS and translate to the classname `embed-responsive-{aspect}` (i.e.
`embed-responsive-16by9`, `embed-responsive-4by3`, etc.).
## Wrapper element
The Responsive embed is wrapped in an outer element (default is `div`) to enforce the responsive
aspect ratio. You can change this tag via the `tag` prop.
## Attributes and child elements
Any additional attributes provided to `<b-embed>` (other than the above `type`, `aspect` and `tag`
props) are applied to the inner embedded element (i.e. the `iframe`, `video`, `embed` or `object`).
Any children elements between the opening and closing `<b-embed>` will be placed inside the inner
embedded element. Note that the type `iframe` does not support any children.
**Example: Responsive embedding of an HTML5 `<video>`**
```html
<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>
```
## See also
- [`<b-aspect>` component](/docs/components/aspect)
<!-- Component reference added automatically from component package.json -->
|