Отзывчивый iframe работает только на Youtube, а не на Vimeo

Question

Отредактировано: вставленные фрагменты в соответствии с предложением.

После бесчисленных публикаций и учебных пособий: мне удалось получить следующий код, который делает то, что мне нужно, но только с видео на YouTube:

#container {

      width: 100%;
      height: 1px;
      position: relative;
    }
    #navi,
    #infoi {
      width: 60%;
      height: 60%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
    }
        #closeB {
            position: fixed;
            top: 28%;
            left: 79%;
            width: 30px;
            height: 30px;
            border: 0;
            cursor: hand;
            cursor: pointer;
            background-color: grey;
        }
        video-responsive {
        position: relative;
        overflow: hidden;
        padding-top: 56.25%;
            padding-top: 60px;
    }
        .video-responsive iframe {
        position: fixed;
        top: 30%;
        left: 20%;
        width: 60%;
        height: 60%;
        border: 0;
    box-shadow: 6px 6px 5px 0px rgba(0,0,0,0.75);
    }

    <div id="container">
    
                  <div id="infoi">
                        <div class="video-responsive">
        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" gesture="media"  allow="encrypted-media" allowfullscreen></iframe>
    </div>                      
                      <button id="closeB">X</button>
    
          </div>
    </div>

Этот код делает то, что я хочу с видео на Youtube:

1. Плавающее видео выше всего остального
2. Он находится посередине
3. Он реагирует на все размеры экрана
4. Кнопка закрытия остается в верхнем левом углу видео (над ним) в каждом окне изменения размера, которое я пытаюсь изменить.

Однако, как только я меняю источник видеосигнала на Vimeo (<iframe src="https://player.vimeo.com/video/148751763"), он больше не работает (кнопка закрытия блуждает по кругу из iframe, она не прилипает к углу, как при вставке YouTube)

Фрагмент 2:

#container {

      width: 100%;
      height: 1px;
      position: relative;
    }
    #navi,
    #infoi {
      width: 60%;
      height: 60%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
    }
        #closeB {
            position: fixed;
            top: 28%;
            left: 79%;
            width: 30px;
            height: 30px;
            border: 0;
            cursor: hand;
            cursor: pointer;
            background-color: grey;
        }
        video-responsive {
        position: relative;
        overflow: hidden;
        padding-top: 56.25%;
            padding-top: 60px;
    }
        .video-responsive iframe {
        position: fixed;
        top: 30%;
        left: 20%;
        width: 60%;
        height: 60%;
        border: 0;
    box-shadow: 6px 6px 5px 0px rgba(0,0,0,0.75);
    }

<div id="container">
    
                  <div id="infoi">
                        <div class="video-responsive">
        <iframe src="https://player.vimeo.com/video/148751763" gesture="media"  allow="encrypted-media" allowfullscreen></iframe>
    </div>                      
                      <button id="closeB">X</button>
    
          </div>
    </div>

Answer 1

Вы говорите об этом?

https://codepen.io/Rishab2019/pen/NWGgYBX

  <div id="container">

  <div id="infoi">
     <div class="video-responsive">
   <iframe src="https://player.vimeo.com/video/148751763" gesture="media" 
  allow="encrypted-media" allowfullscreen></iframe>

  </div>                      
  <button id="closeB">X</button>

      </div>
  </div>

css

  #container {

  width: auto!important;
  height: auto;
  position: relative;

}
#navi,
#infoi {
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
    }
  #closeB {
   position: fixed;

   left:61.3%;
   width: 30px;
   height: 30px;
   border: 0;
   cursor: hand;
   cursor: pointer;
   background-color: grey;
    }
   .video-responsive {
    position: relative;
    width: auto;
    height: auto;


   }
    iframe {
    position: fixed;
    width: 100%;
    height: 100%;
    border: 0;
    box-shadow: 6px 6px 5px 0px rgba(0,0,0,0.75);
   }