我的主页上有一个YouTube视频-> https://delicateseams.com/在页面左下方的内容块中。
视频缩略图在移动设备上无响应。
有谁知道如何获得YouTube视频的缩略图以进行响应？
最佳答案
据我所知，您的问题是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/
我尚未测试它的响应速度，但也许这个想法对您有所帮助。我认为您希望“保持联系”框的宽度固定，至少这是它在网页中的外观。
希望这对您有帮助:)
关于video - 如何制作YouTube iFrame视频自适应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47376498/