html - 自适应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视频的要求:

将视频 float 在其他所有内容之上

在中间

在所有屏幕尺寸下都响应

关闭按钮位于视频的左上角(在
它)在我尝试的每个窗口中调整大小。

但是，一旦我将视频源更改为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);
   }