$col-bg: #ddd;

.embed {
  position:  relative;
  max-width: 100%;
  margin:    0;
  padding:   0;

  iframe,
  object {
    max-width: 100%;
  }

  img {
    display:   block;
    max-width: 100%;
    height:    auto;
  }

  &--video {
    background-color: $col-bg;
    overflow:         hidden;

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

  &--error {
    font-size:  .8em;
  }

  &__thumb {
    position: absolute;
    top:      0;
    left:     0;
    width:    100%;
    height:   100%;

    background-repeat:   no-repeat;
    background-position: center center;
    background-size:     cover;

    cursor:  pointer;

    > img {
      position:   absolute;
      top:        50%;
      left:       50%;
      width:      25%;
      min-width:  75px;
      max-width:  175px;
      transform:  translate(-50%, -50%);
      transition: opacity .3s ease-in-out;
      opacity:    .65;
    }

    &:hover {
      > img {
        opacity: 1;
      }
    }
  }

}