// Use this instead of the default YouTube embed code so that the embed
// is responsive.
//
// Example default YouTube embed:
//     <iframe width="560" height="315"
//             src="https://www.youtube.com/embed/CEcFnqRDfgw?rel=0"
//             frameborder="0" allowfullscreen></iframe>
//
// Example responsive YouTube embed:
//     <div class="embed-container">
//       <iframe src="https://www.youtube.com/embed/CEcFnqRDfgw?rel=0"
//               frameborder="0" allowfullscreen></iframe>
//     </div>
//
// Note that this only works well for the 16:9 aspect ratio. This is by far
// the most common aspect ratio for videos, and YouTube seems to "force" it
// on vertical videos as well (i.e. tall videos will play in a wide 16:9
// letterbox).
.embed-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 1em;

  iframe, object, embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
