html - 覆盖 YT 视频的 PNG - 跨设备的对齐问题

Question

我一直在摆弄我在这里找到的很多信息，将透明的电视 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&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></div>
      </div>
    </div>

目前在 http://nickosteel.com 直播供你引用。
问候

Answer 1

我可以看到的一个问题是你的电 View 像比它需要的大，这意味着它变得有点困难。我会做以下更改。
容器(id="panel")

将此最大宽度设置为在您的电 View 像之后并将其居中margin: 0 auto;

电视画面

切割它，使其左侧与右侧一样多，因此右侧的面板宽度应该与左侧一样“透明”。这使得对齐

变得更加容易。

将其用作图像(<img />)而不是背景，这样它就会变得响应并具有自然的高度(和宽度)。

设置宽度 width: 100%; (这是响应部分)

视频

让它响应，看看this post为此(请注意，您不需要任何 javascript，只需 html/css)

居中

有了这个，您就可以选择响应式解决方案了。为您提供 css 和 html 中的更改会更容易一些，但为此您需要首先让电 View 像具有正确的大小。希望这是有道理的!
只是我的一个意见，使用类进行样式设置和 id 用于 javascript 目标。