
  
  .container_player {
      position: relative;
      overflow: hidden;
      background-color: #111;
      min-height: 60px;
      /*border: 2px solid;*/
  }
  
  .video_player {
    width: 10px;
    z-index: 1;
  }
  
  .menu-vid {
    
      margin-top: -160px;
      display: flex;
      background-color: rgba(0,0,0,0);
      flex-wrap: nowrap;
      background-color: #111;
      position: absolute;
      background: linear-gradient(to top, rgba(30,30,30,0.8), rgba(0,0,0,0));
      
      height: 45px;
      /*border: 1px solid blue;*/
      bottom: 0;
      right: 0;
      left: 0;
      top: 420px !important;
      transform: translateY(100%);
      transition:all .2s;
      z-index: 2147483647; /*минимальное значение при котором показывается в фулл режиме*/
  }
  
  .container_player:hover .menu-vid {
      transform: translateY(0);
  }
  
  .hide_menu { /*нужно для полноэкранного режима*/
      transform: translateY(100%) !important; 
      /*что бы перекрывался ховер при наведении*/
  }
  
  .btn-vid {
      font-weight: bold;
      text-shadow: #fff 0 0 3px;
      background-color: transparent;
      border-style: none;
      border:0;
      outline:0;
      color: white;
      cursor: pointer;
      width: 40px;
      /*border: 1px solid red;*/
  }
  
  #play_pause {
      margin-left: 5px;
  }
  
  .icon-vid {
    width: 20px;
    height: 1.4em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
  }
  
  #position {
      -webkit-appearance: none ; /* Скрывает слайдер, чтобы можно было создать свой */
      box-sizing: inherit;
      border-style: none;
      border:0;
      outline:0;
      background-color: transparent;
      /*border: 1px solid red;*/
      height: auto;
      width: 100%;
      margin: 0 0 0 15px;
  }
  
  #volume {
      width: 60px;
      -webkit-appearance: none ; /* Скрывает слайдер, чтобы можно было создать свой */
      border-style: none;
      border:0;
      outline:0;
      background-color: transparent;
      /*border: 1px solid red;*/
      margin: 0 0 0 5px;
  }
  
  #position::-webkit-slider-thumb, #volume::-webkit-slider-thumb { /*указатель на полоске*/
      -webkit-appearance: none;
      height: 13px;
      width: 13px;
      border-radius: 50%;
      background: #ffffff;
      cursor: pointer;
      margin-top: -3px; /* Вам нужно указать значение для поля в Chrome, но в Firefox и IE это происходит автоматически */
  }
  
  #position::-webkit-slider-runnable-track, #volume::-webkit-slider-runnable-track {  /*полоска*/
      -webkit-appearance: none;
      width: 100%;
      height: 6px;
      background-color: rgba(255,255,255,0.3);
      border-radius: 5px;
      border: 0.2px solid #010101;
      border-style: none;
      cursor: pointer;
      outline: 0;
  }
  
  #volume::-webkit-slider-runnable-track {
      background-color: rgba(255,170,0,0.5);
  }
  
  .block_time {
      display: block;
      /*border: 1px solid #fff;*/
      margin: 0 10px;
      white-space: nowrap;
      vertical-align: middle;
  }
  
  .time {
      display: inline-block;
      height: 1em;
      /*border: 1px solid green;*/
      margin: 20% 0;
      font-family: sans-serif;
      font-size: 15px;
      color: rgba(255,255,255, 0.8);
      text-shadow: #fff 0 0 1px;
  }
  
  #full {
      margin-right: 5px;
  }
  
  .video_player::-webkit-media-controls { 
    display:none !important; 
    /*можно и без импортант. 
    А вообще, отменяет стандартные контролсы при попадании в полноэкранный режим*/
  }
  

  @media (max-width:1208px) {
    
    .menu-vid{
      margin-top: -210px;
     
      
    }
  
  }

  @media (max-width:390px) {
    
    .menu-vid{
      margin-top: -260px;
     
      
    }
  
  }
  
 
  