Skip to main content

Dimensions

Outer container

Height

HTML

<o-embed url="https://youtu.be/FTQbiNvZqaY" height="300"></o-embed>

Width

HTML

<o-embed url="https://youtu.be/FTQbiNvZqaY" width="300"></o-embed>

Width and height

HTML

<o-embed url="https://youtu.be/FTQbiNvZqaY" width="300" height="300"></o-embed>

Inner <iframe>

Optional, Custom CSS Properties were added in @social-embed/wc at 0.0.3-next.0:

  • --social-embed-iframe-height
  • --social-embed-iframe-width

Height

HTML

<style>
o-embed.full {
--social-embed-iframe-height: 100%;
--social-embed-iframe-width: 100%;
height: 500px;
}
</style>
<o-embed url="https://youtu.be/FTQbiNvZqaY" class="full"></o-embed>

Height + width

<style>
o-embed.full {
--social-embed-iframe-height: 100%;
--social-embed-iframe-width: 100%;
width: 500px;
height: 300px;
}
</style>
<o-embed url="https://youtu.be/FTQbiNvZqaY" class="full"></o-embed>