如何使 YouTube iFrame 视频响应式答案

【问题标题】：How to make a YouTube iFrame Video Responsive如何使 YouTube iFrame 视频响应式
【发布时间】：2018-05-02 18:09:08
【问题描述】：

我的主页上有一个 YouTube 视频 --> https://delicateseams.com/ 在左侧内容块页面的一半处。

视频缩略图在移动设备上没有响应。

有谁知道如何让 YouTube 视频的缩略图具有响应性？

【问题讨论】：

没试过，但是你可以在你的css中为移动设备添加一个css部分：@media only screen and (max-device-width: SOMEWIDTH) { //你的iframe大小在这里，也许 100%}
正是@AramBecker ......这成为css应该是什么样子的问题。我试过background-image:contain、width:100%、mx-width:100%，但我所知道的一无所获。
我现在在我的手机上，我一到我的电脑就会看看你的页面源代码
好吧，抱歉花了比我想象的更长的时间来腾出一些空闲时间。因此，据我所知，您的问题是 iframe 及其父级具有固定宽度（600 像素），但它周围的 flex 布局允许它小得多（在小型浏览器窗口中，“保持联系”面板和视频流超出了他们的界限。我正在寻找解决这个问题的方法，主要问题是 iframe 在删除修复宽度时会失去它的比例。
谢谢@AramBecker。我会在接下来的一天左右看看这个......

标签： video youtube thumbnails responsive

【解决方案1】：

据我所知，您的问题是 iframe 及其父级具有固定宽度（600 像素），但它周围的 flex 布局允许它更小（在小型浏览器窗口中，“保持联系”面板和视频流过它们的界限。

也许这与您的需求相似？

.flex-wrapper {
    display: flex;
    flex-flow: row wrap;
}

.video-wrapper {
    min-width: 40%;
    max-width: 600px;
    height: 100%;
    margin:  10px 10px;
    flex: 1 1 auto;
}

@media only screen and (max-width: 500px) {
  .video-wrapper {
    min-width: 360px;
  }
}

.ratio-keeper {
    position: relative;
    padding-top: 56.25%;
}

.right-panel {
    width: 360px;
    flex: 0 0 auto;
}

.bordered {
    border: 1px solid black;
    padding: 0px 10px;
    margin: 0px 10px;
}

.video-frame {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

<body>
  <div class="flex-wrapper">
    <div class="video-wrapper">
      <div class="ratio-keeper">
        <iframe class="video-frame"src="https://www.youtube.com/embed/X_tYrnv_o6A?rel=0" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
    <div class="right-panel">
      <div class="bordered">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et elit feugiat, finibus orci a, ultricies velit. Proin ac cursus magna, nec dapibus orci. Cras aliquet magna vitae enim faucibus consequat. Morbi nisl lacus, porta nec imperdiet tempus, dictum vitae ligula. Etiam quis tincidunt lorem, quis viverra orci. Quisque scelerisque, odio sit amet congue laoreet, dui ipsum congue ligula, sed varius mi turpis ac velit. Integer id sem a nunc tincidunt scelerisque non ut magna. Duis in mauris ut eros finibus malesuada.
        </p>
      </div>
    </div>
  </div>
</body>

JSFiddle：https://jsfiddle.net/m1tLp64m/

我还没有测试它的响应性，但也许这个想法对你有帮助。我想您希望您的“保持联系”框具有固定宽度，至少它在您的网页中是这样的。

希望这对您有任何帮助:)

【讨论】：

【解决方案2】：

按照这个来

       <div class="vid-container">
         <iframe width="100%" height="450" src="https://www.youtube.com/embed/quPqtSl1hQE?rel=0=1" allowfullscreen id="busi-vid"></iframe>
       </div>

CSS：

 .vid-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}
.vid-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

礼貌：https://www.youtube.com/watch?v=9YffrCViTVk

【讨论】：