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&amp;controls=0&amp;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目标。