Sircus

16:9

<div class="FullEmbed FullEmbed--16by9">
  <iframe src="https://www.youtube.com/embed/6roX9u4sQVk" frameborder="0" allowfullscreen></iframe>
</div>

4:3

<div class="FullEmbed FullEmbed--4by3">
  <iframe src="https://www.youtube.com/embed/6roX9u4sQVk" frameborder="0" allowfullscreen></iframe>
</div>

3:1

<div class="FullEmbed FullEmbed--3by1">
  <iframe src="https://player.vimeo.com/video/77453937" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

2:1

<div class="FullEmbed FullEmbed--2by1">
  <iframe src="https://www.youtube.com/embed/6roX9u4sQVk" frameborder="0" allowfullscreen></iframe>
</div>

Install

npm install sircus-components-fullembed

CSS import

@import "sircus-components-fullembed";

CSS

/*　FullEmbed
======================================== */
.FullEmbed {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}

.FullEmbed > .FullEmbed-item,
.FullEmbed > iframe,
.FullEmbed > embed,
.FullEmbed > object,
.FullEmbed > video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  border: 0;
}

.FullEmbed--16by9 { padding-bottom: 56.25%; }
.FullEmbed--4by3  { padding-bottom: 75%; }
.FullEmbed--3by1  { padding-bottom: 33.33333333333333%; }
.FullEmbed--2by1  { padding-bottom: 50%; }