嵌入式视频仅在更改浏览器 window 大小时出现
Embedded video appears only when changing browser window size
我遇到了一个奇怪的视频嵌入问题。
在任何桌面浏览器(Chrome、Edge 等)中,我导航到 https://veganism101.com/faq-on-veganism-for-health/ 并一直向下滚动到“疑难解答”问题并将其展开。
右边应该有一个嵌入式 YouTube 视频(就在标题上方:自定义 HTML 嵌入式视频)。但它不在那里。但是当我 minimize/maximize 我的浏览器 window 甚至稍微改变浏览器 window 大小时,视频就会出现!
我在不同的桌面浏览器、不同的台式电脑上试过这个。同样的问题。令人惊讶的是,在移动设备上查看时不会发生此问题。
这是我用来嵌入视频的代码。
.codegena {
position:relative;
width:100%;
height:0;
padding-bottom:56.27198%;
}
.codegena iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
<div class="codegena">
<iframe width="560" height="329" src="https://www.youtube.com/embed/OwlGTVh06NQ?&modestbranding=1&rel=0" frameborder="0" allowfullscreen="">
</iframe>
</div>
我不知道是什么原因造成的。非常奇怪的行为。
如果这是您的网站,那么就有一个明显的问题。
当我进入开发人员控件时,视频的 iframe 的宽度和高度为 0。
通过修改 css:
来解决这个问题
iframe{
width: 602px;
height: 337.12px;
}
如果这不是您的网站,不是您的问题,尽管您可能想对所有者说些什么。
感谢@agent-biscutt 为我指明了正确的方向。进一步调整建议,将 !important 添加到 iframe 的宽度和高度对我有用。视频显示并响应。我知道在 CSS 中使用它并不总是最佳实践,但感觉这就是其中一种情况。无论如何,这就是我调整它的方式:
.codegena iframe{
position:absolute;
top:0;
left:0;
width:100% !important;
height:100% !important;
}
我遇到了一个奇怪的视频嵌入问题。
在任何桌面浏览器(Chrome、Edge 等)中,我导航到 https://veganism101.com/faq-on-veganism-for-health/ 并一直向下滚动到“疑难解答”问题并将其展开。
右边应该有一个嵌入式 YouTube 视频(就在标题上方:自定义 HTML 嵌入式视频)。但它不在那里。但是当我 minimize/maximize 我的浏览器 window 甚至稍微改变浏览器 window 大小时,视频就会出现!
我在不同的桌面浏览器、不同的台式电脑上试过这个。同样的问题。令人惊讶的是,在移动设备上查看时不会发生此问题。
这是我用来嵌入视频的代码。
.codegena {
position:relative;
width:100%;
height:0;
padding-bottom:56.27198%;
}
.codegena iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
<div class="codegena">
<iframe width="560" height="329" src="https://www.youtube.com/embed/OwlGTVh06NQ?&modestbranding=1&rel=0" frameborder="0" allowfullscreen="">
</iframe>
</div>
我不知道是什么原因造成的。非常奇怪的行为。
如果这是您的网站,那么就有一个明显的问题。 当我进入开发人员控件时,视频的 iframe 的宽度和高度为 0。 通过修改 css:
来解决这个问题iframe{
width: 602px;
height: 337.12px;
}
如果这不是您的网站,不是您的问题,尽管您可能想对所有者说些什么。
感谢@agent-biscutt 为我指明了正确的方向。进一步调整建议,将 !important 添加到 iframe 的宽度和高度对我有用。视频显示并响应。我知道在 CSS 中使用它并不总是最佳实践,但感觉这就是其中一种情况。无论如何,这就是我调整它的方式:
.codegena iframe{
position:absolute;
top:0;
left:0;
width:100% !important;
height:100% !important;
}