assets/stylesheets/bootstrap/_responsive-embed.scss
author ymh <ymh.work@gmail.com>
Thu, 15 Jun 2017 12:17:09 +0200
changeset 114 af15590802a4
permissions -rw-r--r--
add a lot of files
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
114
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     1
// Embeds responsive
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
//
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     3
// Credit: Nicolas Gallagher and SUIT CSS.
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     4
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     5
.embed-responsive {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     6
  position: relative;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     7
  display: block;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     8
  height: 0;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     9
  padding: 0;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    10
  overflow: hidden;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    11
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    12
  .embed-responsive-item,
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    13
  iframe,
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    14
  embed,
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    15
  object,
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    16
  video {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    17
    position: absolute;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    18
    top: 0;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    19
    left: 0;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    20
    bottom: 0;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    21
    height: 100%;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    22
    width: 100%;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    23
    border: 0;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    24
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    25
}
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    26
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    27
// Modifier class for 16:9 aspect ratio
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    28
.embed-responsive-16by9 {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    29
  padding-bottom: 56.25%;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    30
}
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    31
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    32
// Modifier class for 4:3 aspect ratio
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    33
.embed-responsive-4by3 {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    34
  padding-bottom: 75%;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    35
}