如何解决PNG叠加YT视频-跨设备的对齐问题
我一直在摆弄许多此处找到的信息,以便将透明的电视PNG覆盖在youtube视频上,并成功地使其可以在桌面上使用。但是,当在移动设备上观看时(这将是主要收视者),我无法使其正确对齐。有没有办法根据所使用的设备强制使用不同的CSS值?
#panel {
position: relative;
width: auto;
height: 625px;
overflow: hidden;
}
#panel-tv {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('images/tvoverlay.png') no-repeat center;
pointer-events: none;
z-index: 10;
}
#panel-content-overlay {
position: absolute;
top: 80px;
left: 24%;
width: 720px;
height: 405px;
z-index: 9;
background-color: #000;
}
#embed-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
<div id="panel">
<div id="panel-tv"></div>
<div id="panel-content-overlay">
<div id="panel-content">
<div id="embed-container">
<div style="width: 683px; " class="wp-video">
<iframe width="710" height="399" src="https://www.youtube.com/embed/ZI2dbyNn8PI?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
该视频当前在http://nickosteel.com上供您参考。
致谢
解决方法
我可以看到的一个问题是,您的电视图像比实际需要的要大,这意味着它变得更难了。我将进行以下更改。
容器(id =“ panel”)
- 将此最大宽度设置为电视图像之后,并使用
margin: 0 auto;
电视图像
- 剪切它,使其在左边和右边一样多,因此右边的面板宽度应该在左边“透明”。这样可以更轻松地对齐
- 将其用作图像(
<img />
)而不是背景,这样它将变得灵敏,并具有自然的高度(和宽度)。 - 设置宽度
width: 100%;
(用于响应部分)
视频
- 使其具有响应性,为此,请查看this post(请注意,您不需要任何JavaScript,只需html / css)
- 将其居中
为此,您很好地寻求响应式解决方案。为您提供css和html的更改会更容易一些,但是为此,您需要以合适的尺寸开始电视图像。希望这有道理!
只是我的意见,请使用类进行样式设置,并使用id作为javascript目标。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。