更改 iFrame 标记的高度答案

【问题标题】：Changing the height of an iFrame tag更改 iFrame 标记的高度
【发布时间】：2017-08-03 16:27:25
【问题描述】：

我正在尝试制作一个当用户向下滚动时具有整页视频的网页（主页）。标题是全屏幻灯片，但是一旦向下滚动，就会出现全屏视频。我已经尝试了 iframe 的 CSS，我想出如何更改高度的唯一方法是使用 height: 800px; 但问题是我需要能够在计算机和智能手机上查看它，当我在智能手机上查看时，垂直边距很大。

<iframe style="
width: 100%;
height: 800px !important;
" src="https://www.youtube.com/embed/itookthispartout" frameborder="0" allowfullscreen="" id="fitvid383042"></iframe>

【问题讨论】：

使用padding-bottom

标签： javascript jquery html css iframe

【解决方案1】：

这里有一个解决方案https://jsfiddle.net/1eozsnsb/

&lt;iframe style="width: 100%;height: 100vh;" src="https://www.youtube.com/embed/itookthispartout" frameborder="0" allowfullscreen="" id="fitvid383042"&gt;&lt;/iframe&gt;

【讨论】：

这不是响应式的。

【解决方案2】：

试试CSS's @media rule。它允许您根据用户浏览的屏幕大小更改大小，无论是高度还是底部填充。

【讨论】：