Html 如何根据屏幕大小调整播放列表的大小？

播放列表对于我的显示器来说太大了，所以底部和侧面都有滚动条

以下是源代码：

<div>
    <p>
        <iframe 
            allowfullscreen="true" 
            allowtransparency="true" 
            class="wistia_playlist" 
            frameborder="0" 
            height="720" 
            width="1280"
            name="wistia_playlist"
            style="border:5px"
            scrolling="no"
            src="example link"
        ></iframe>
    </p>
</div>

我在网上试过一些例子，但到目前为止还没有成功。如果有什么不同，我会在网站的DNN HTML模块中执行此操作。

<style>
iframe {
  height: 300px;
  width: 300px;
  resize: both;
  overflow: auto;
}
</style>
<div>
    <p>
        <iframe 
            allowfullscreen="true" 
            allowtransparency="true" 
            class="wistia_playlist" 
            frameborder="0" 
            height="720" 
            width="1280"
            name="wistia_playlist"
            style="border:5px"
            scrolling="no"
            src="http://example.com"
        ></iframe>
    </p>
</div>

iframe{
高度：300px；
宽度：300px；
调整大小：两者；
溢出：自动；
}

---

允许使用css调整大小<代码>调整大小：两者都有

谢谢！如果用户选择，它甚至允许用户手动重新调整视频大小。