• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1// Embeds responsive
2//
3// Credit: Nicolas Gallagher and SUIT CSS.
4
5.embed-responsive {
6  position: relative;
7  display: block;
8  height: 0;
9  padding: 0;
10  overflow: hidden;
11
12  .embed-responsive-item,
13  iframe,
14  embed,
15  object,
16  video {
17    position: absolute;
18    top: 0;
19    left: 0;
20    bottom: 0;
21    height: 100%;
22    width: 100%;
23    border: 0;
24  }
25}
26
27// Modifier class for 16:9 aspect ratio
28.embed-responsive-16by9 {
29  padding-bottom: 56.25%;
30}
31
32// Modifier class for 4:3 aspect ratio
33.embed-responsive-4by3 {
34  padding-bottom: 75%;
35}
36