Я хочу, чтобы размер встроенного видео на YouTube можно было изменять пользователем, сохраняя соотношение сторон - PullRequest
0 голосов
/ 04 декабря 2018

Сейчас я использую атрибут 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>
...