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
<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>
<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
<!-- Component reference added automatically from component package.json -->