根据屏幕调整 iFrame 宽度答案

【问题标题】：Resize iFrame width according to screen根据屏幕调整 iFrame 宽度
【发布时间】：2023-03-03 14:00:01
【问题描述】：

我在写 ASP.NET MVC 网站

我的页面上有来自 vimeo 的视频，我需要它根据屏幕调整大小。

这里是irame的代码

<iframe src="https://player.vimeo.com/video/197047485?color=ffffff" id="iframe1" width="800" height="600" frameborder="0"  webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

我该怎么做？

【问题讨论】：

添加媒体查询

标签： html asp.net asp.net-mvc iframe

【解决方案1】：

这对我有用：

你的 CSS：

#iframe1 {
  width: 50vw; 
  height: 50vh;
}

检查这个小提琴： https://jsfiddle.net/nindaclaudel/24wxmh8u/#&togetherjs=f6wcF2fjsf

【讨论】：

视口宽度和高度并未得到普遍支持，即使在现代浏览器中也是如此。