Сайт адаптивный с резиновой версткой, и нужно разместить видео во всплывающем окне. Соответственно, само окно и видео в нём должны адаптироваться к ширине экрана монитора.

В сети есть обкатанные решения, из которых я надеялся получить подходящий код.

Результат попыток приведён вот здесь: http://u9998464.beget.tech/

Само окно и видео более-менее адаптируются под размер экрана, но в целом решение плохое:

1. Видео слишком вытянуто. Размер изображения должен быть с соотношением сторон 55 на 40 (по горизонтали - по вертикали). Никакими средствами CSS добиться этого не удается.

2. Само изображение очень маленькое. Если запустить воспроизведение, то изображение только в середине, а остальное чернота.

3. Изображение полностью перекрывает текст всплывающего окна, включая Х для его закрытия.

4. Если закрыть окно, то воспроизведение звука продолжается.

Можно ли решить эти проблемы?
(Хотя бы первые три.)

padding-top: 72.72%;

Все взято с просторов в течении 20 минут скорректировано, в общем написано на коленке...
У Ютуба, есть API вроде как, там можно вообще "чудеса" делать, но это я так... - прочитал порыхлому, сам не юзал ни разу, ембеда хватало ))

<style>
.myvideo {
	position:relative;
	padding-bottom:56.25%;	
	height:0;
	overflow:hidden;
	border:1px solid #ccc;
}
.myvideo iframe,.myvideo object,.myvideo embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.lightbox1 {
  display: none;
}
.lightbox1 + label {  /* надпись "образец" */
  border-bottom: 1px dashed;
  cursor: zoom-in;
}
.lightbox1 + label + * {  /* коробка */
  visibility: hidden;
  position: fixed;
  z-index: 11;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background: rgba(0,0,0,.5);
  text-align: center;
  line-height: 100vh;
}
.lightbox1:checked + label + * {
  visibility: visible;
}
.lightbox1 + label + * > * {  /* position: absolute; как-то странно себя ведёт в родителе с position: fixed;, поэтому была задействована ещё одна обёртка */
  position: relative;
}
.lightbox1 + label + * > * > :first-child {  /* кликабельный фон */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: zoom-out;
}
.lightbox1 + label + * > * > :last-child {  /* блок с окном */
  position: relative;
  display: inline-block;
  width: calc(100% - (8px + 2px)*2);
  margin: 8px;
  border: 2px solid rgb(51, 103, 153);
  box-shadow: 0 0 0 8px rgba(255,255,255,.2);
  background: #fff;
  text-align: left;
  line-height: normal;
  vertical-align: middle;
}
.lightbox1 + label + * > * > :last-child > :first-child {  /* заголовок */
  position: relative;
  padding: .5em 4em .5em .5em;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  text-overflow: ellipsis;
  color: #fff;
  background: linear-gradient(#669acc 50%, #5589bb 50%);
}
.lightbox1 + label + * > * > :last-child > :first-child label {  /* крестик "закрыть" */
  position: absolute;
  top: calc(.5em - 2px);
  right: calc(.5em - 2px);
  font-weight: 600;
  cursor: pointer;
}
.lightbox1 + label + * > * > :last-child > :last-child {  /* поле после заголовка */
  padding: .5em;
}
.lightbox1 + label + * > * > :last-child > :last-child label {
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.lightbox1 + label + * label > button {
  position: relative;
  z-index: -1;
}
</style>

<script src="jquery-1.7.1.min.js"></script>

<input type="checkbox" id="dva" class="lightbox1"/>
<label for="dva"><div style="text-align: center;">Как добавить статью</div></label>

<div>
	<div>
	  <label for="dva"></label>
	  <div>
		<div>Мое модальное окно <label for="dva" class="close_button">&#10006;</label></div>
		<div>
			<div class="myvideo">
				<iframe src="//www.youtube.com/embed/GN8uxS83x8Y?rel=0&enablejsapi=1" frameborder="0" allowfullscreen id="Youtube"></iframe>
				<script src="//www.youtube.com/player_api"></script>
				<script>
				function onYouTubePlayerAPIReady() {
				  player = new YT.Player('Youtube', {
					events: {'onReady': onPlayerReady}
				  });
				}
				function onPlayerReady(event) {
				  document.getElementById("playYoutube").addEventListener("click", function() {player.playVideo();});
				  document.getElementById("pauseYoutube").addEventListener("click", function() {player.pauseVideo();});
				}
				</script>
			</div>
		</div>
	  </div>
	</div>
</div>

<script>
var inp = document.getElementsByClassName('lightbox1');
for (var i = 0; i < inp.length; i++) {
  inp[i].onclick = function() {
    document.documentElement.style.overflow=(this.checked ? 'hidden' : 'auto');
    document.documentElement.style.marginRight=(this.checked ? '17px' : '');
  }
}
$(document).ready(function() {
	$('.lightbox1').click(function() {
		if ( $('.lightbox1').prop('checked') == false ){
			player.pauseVideo();	// Пауза видео
			// player.playVideo();  // Играть видео
		}
	});
})
</script>