Адаптивное встроенное видео 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
    }