Css 响应性iframe(youtube/vimeo嵌入),采用高度而非宽度

Css 响应性iframe(youtube/vimeo嵌入),采用高度而非宽度,css,iframe,embed,Css,Iframe,Embed,我有一个包含元素,其高度将随视口宽度的变化而变化。它将从vimeo和youtube加载视频内容 我想做的是创建一个响应性嵌入,根据高度保持视频的纵横比 我知道传统的方法使用高度:0和基于百分比的填充底部,允许根据需要设置宽度,但这并不是我所需要的 我希望能够指定高度,并自动计算元素的宽度。这在css中是可能的还是我需要求助于js?你可以用css来实现。只需在媒体上放置一个高度:100vh或任何您想要的高度,以及一个宽度:100%,它将获取视口的高度和父元素的宽度。然后可以使用“背景大小”属性,以

我有一个包含元素,其高度将随视口宽度的变化而变化。它将从vimeo和youtube加载视频内容

我想做的是创建一个响应性嵌入,根据高度保持视频的纵横比

我知道传统的方法使用高度:0和基于百分比的填充底部,允许根据需要设置宽度,但这并不是我所需要的


我希望能够指定高度,并自动计算元素的宽度。这在css中是可能的还是我需要求助于js?

你可以用css来实现。只需在媒体上放置一个
高度:100vh
或任何您想要的高度,以及一个
宽度:100%
,它将获取视口的高度和父元素的宽度。然后可以使用“背景大小”属性,以便媒体保持其比率:

如果你需要更多的帮助,请告诉我

你可以试试

。响应iframe{
位置:绝对位置;
排名:0;
底部:0;
左:0;
宽度:100%;
身高:100%;
边界:0;

}
您是否尝试固定高度并将宽度设置为“自动”?也许你的iframe会简单地调整?