JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<h1>CSS - Адаптивное Видео</h1>

<div class="video-responsive">
<iframe width="560" height="315" src="https://www.youtube.com/embed/-8uEKq9EXNM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

CSS

.video-responsive { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow:hidden; 
} 
 
.video-responsive iframe, 
.video-responsive object, 
.video-responsive embed {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%;
  height: 100%; 
}