.ytinline {position: relative}
.ytinline_preview {
    background-position: center center;
    background-size: cover;
    background-color: #696969;
    z-index: 2;
    cursor: pointer;
    background-blend-mode: overlay;
    transition: all 0.5s ease;
}
.ytinline_preview:hover{ background-blend-mode: normal;}
.ytinline_playbutton {
    font-size: 3em;
    color: #d4d4d4;
    text-align: center;
    position: absolute;
    right: 0;
    left: 0;
    z-index: 3;
    top:75%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0.8;
}
.ytinline_playbutton:hover {
    font-size: 4em;
    transition: all 0.2s ease;
    color: white;
    cursor: pointer;
}
.ytinline_title {
    color: white;
    position: absolute;
    bottom: 10px;
    text-align: center;
    width: 100%;
    cursor: pointer;
    transition: all 0.5s ease;
    font-size: 1.5em;
    text-shadow: 1px 1px 1px black;
    opacity: 0.8;
}
.ytinline_videoarea {
  width: 100%; 
  height: auto; 
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: black;
  display:none;
  cursor: pointer;
  overflow: hidden;
}
.ytinline_preview {height: 300px;}
.ytinline iframe, .ytinline object, .ytinline video {max-width: 100%;}
.ytinline_overlay {
    background-image: url(../png/fake-brick.png);
    overflow: hidden;
    position: absolute;
    top: 25%;
    left: 50%;
    -webkit-transform: translate(-50%, -25%);
    transform: translate(-50%, -25%);
    position: absolute;
    display: block;
    height: 0;
    width: 100%;
    padding: 0;
    padding-bottom: 56.25%;
    z-index: 21;
    background-repeat: repeat
}
.ytinline .ytinline_wrapper {
  z-index: 1; 
  overflow: hidden;
  position: relative;
  display: block;
  height: 0;
  width: 100%;
  padding: 0;
  padding-bottom: 40%;
}
.ytinline.ytwide .ytinline_wrapper {
  padding-bottom: 31%;
}
iframe#ytinline_player video {overflow: hidden;}
iframe#ytinline_player {
  z-index: 2;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  pointer-events: none;
  height: calc(100% + 110px);
  margin-top: -55px;
}
.ytwide iframe#ytinline_player {
    height: calc(100% + 250px);
    margin-top: -125px;
}
.ytinline_close {
    z-index: 99;
    position: absolute;
    right: 5%;
    top: 2%;
    color: white;
    cursor: pointer;
    opacity: 0.5;
    font-size: 1.5em;
}





    .ytinline_videoarea input[type=range] {
      -webkit-appearance: none;
      appearance: none;
      margin: 1em 0;
      width: 100%;
    }
    .ytinline_videoarea input[type=range]:focus {
      outline: none;
    }
    .ytinline_videoarea input[type=range]::-webkit-slider-runnable-track {
      width: 100%;
      height: 2px;
      cursor: pointer;
      animate: 0.2s;
      background: silver;
      border-radius: 2px;
    }
    .ytinline_videoarea input[type=range]::-webkit-slider-thumb {
      height: 14px;
      width: 4px;
      border-radius: 2px;
      background: silver;
      cursor: pointer;
      -webkit-appearance: none;
      margin-top: -7px;
    }
    .ytinline_videoarea input[type=range]:focus::-webkit-slider-runnable-track {
      background: white;
    }
    .ytinline_videoarea input[type=range]::-moz-range-track {
      width: 100%;
      height: 0.5em;
      cursor: pointer;
      animate: 0.2s;
      background: #000;
      border-radius: 3px;
    }
    .ytinline_videoarea input[type=range]::-moz-range-thumb {
      height: 3em;
      width: 1em;
      border-radius: 0.5em;
      background: #000;
      cursor: pointer;
    }
    .ytinline_videoarea input[type=range]::-ms-track {
      width: 100%;
      height: 0.5em;
      cursor: pointer;
      animate: 0.2s;
      background: transparent;
      border-color: transparent;
      border-width: 16px 0;
      color: transparent;
    }
    .ytinline_videoarea input[type=range]::-ms-fill-lower {
      background: #000;
      border: 0.2px solid red;
      border-radius: 0.5em;
    }
    .ytinline_videoarea input[type=range]::-ms-fill-upper {
      background: red;
      border: 0.2px solid red;
      border-radius: 0.5em;
    }
    .ytinline_videoarea input[type=range]::-ms-thumb {
      height: 3em;
      width: 1em;
      border-radius: 0.5em;
      background: red;
      cursor: pointer;
      margin-top: -0.5em;
    }
    .ytinline_videoarea input[type=range]:focus::-ms-fill-lower {
      background: red;
    }
    .ytinline_videoarea input[type=range]:focus::-ms-fill-upper {
      background: red;
    }

    #ytinline_progress{
      width: 100%;
      margin: 0;
      margin-top: 0.25em;
      height: 3em;
      background:transparent;
      border:0;
      
    }

    .ytinline_progressbar{
      width: 100%;
      height: 3em;
      position: absolute;
      padding: 0 4em;
      box-sizing: border-box;
      width: 80%;
      left:10%;
      bottom:3%;
      z-index: 99;
      background:transparent;
      border:0;
      visibility: hidden;
    }

    .ytinline_videoarea:hover > .ytinline_progressbar{
      visibility: visible;
    }

    #ytinline_total,
    #ytinline_position{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 4em;
      text-align: center;
    }
    #ytinline_total{
      right: 0;
    }
    #ytinline_position{
      left: 0;
    }