时间戳

首页 > 解决方案 > 我想让用户调整大小的嵌入式 Youtube 视频，同时保持纵横比

javascript - 我想让用户调整大小的嵌入式 Youtube 视频，同时保持纵横比

问题描述

现在我正在使用 CSSresize: both;属性来使围绕视频的 div 可调整大小。我想限制用户可用的调整大小，以便 div 保持其初始纵横比。

最终目标是用户可以调整 YouTube 视频的大小，但不必四处寻找以确保没有黑条浪费的空间。

我研究了padding-bottom在外部 div 中具有 a 的解决方案，但据我所知，这些解决方案仅适用于调整浏览器的大小，而不适用于resizecss 属性。

我已经研究过使 div 仅在一个方向上调整大小，然后使用 Javascript 调整另一个方向。我调查了该onresize事件，但它似乎只适用于调整浏览器的大小，而不是使用resizecss 属性调整大小。如果这行得通，那将更像是一种黑客攻击，而不是我想象的最佳用户体验。

如果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>

标签： javascripthtmlyoutube-api

解决方案

推荐阅读