Сейчас я использую атрибут CSS resize: both;
, чтобы сделать div для видео с изменяемым размером.Я хочу ограничить размер, доступный пользователю, чтобы div оставался в своем исходном соотношении сторон.
Конечная цель заключается в том, чтобы пользователь мог изменить размер видео на YouTube, но ему не нужно возиться, чтобы убедиться, что в нем нет пустого места с черными полосами.
Я искал решениякоторые имеют padding-bottom
во внешнем div, но, насколько я могу судить, эти Решения работают только с изменением размера браузера, а не с атрибутом resize
css.
Я рассмотрел создание divизменяемый размер только в одном направлении, а затем корректируя другое направление с помощью Javascript.Я посмотрел на событие onresize
, но, похоже, оно работает только для изменения размера браузера, а не для изменения с атрибутом resize
css.И если бы это сработало, это было бы скорее взломом, а не лучшим пользовательским опытом, который я себе представляю.
Если свойство resize
в любом случае плохая идея, я открыт для других решений, которые достигают моегоконечная цель.
Вот код, который я хочу сделать так, как описано:
<!DOCTYPE html>
<html>
<style>
#mydiv {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
resize: both;
overflow: auto;
}
</style>
<body>
<div id="mydiv">
<iframe id="yt1" width ="100%"; height="100%"; src="https://www.youtube.com/embed/guf_FTQvjYA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<script>
</script>
</body>
</html>