Question

我的主页上有YouTube视频 - ＆gt; https://delicateseams.com/左侧内容块中的页面的一半。

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

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

Answer 1

从我可以收集的问题是，iframe和它的父亲有一个固定的宽度（600px），但它周围的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/

我还没有测试它的响应性，但也许这个想法可以帮到你。我认为你希望你的“保持联系”框有一个固定的宽度，至少就是它在你网页上的样子。

希望这有助于以任何方式：）

Answer 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

如何制作YouTube iFrame视频响应

2 个答案: