响应式 YouTube 嵌入式视频设置为特定尺寸，没有黑色边框

Question

经过广泛的研究，我觉得我已经竭尽全力尝试不仅将 YouTube 视频集嵌入到特定尺寸，没有黑色边框，而且让它具有响应性。

我已设法摆脱黑色边框并将视频设置为特定尺寸，但就我而言，视频没有响应。

有人可以帮忙解决以下问题吗？

具体尺寸 没有黑边 回应

这是我的代码：

    .videowrap {
    height:360px;
    width:640px;
    position:relative;
    overflow:hidden;
    }

    .videowrap iframe {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    bottom:0;
    }

<iframe width="640" height="360" class="videowrap" 
    src="https://www.youtube.com" frameborder="0" 
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in- 
    picture" allowfullscreen></iframe>

Answer 1

如果您所说的响应式是指在不同的屏幕尺寸上。您可以将@media 用于不同的屏幕尺寸。例如：

    @media (min-width: 480px) and (max-width: 767px) {
    .videowrap {
    height:180px;
    width:320px;
    position:relative;
    overflow:hidden;
    }
// or any other css you want to put in here
    }