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

Posted 2023-03-28

技术标签:

【中文标题】PNG 覆盖 YT 视频 - 跨设备对齐问题【英文标题】：PNG overlaying YT video - alignment issues across devices 【发布时间】：2020-12-20 05:45:54 【问题描述】：

我一直在摆弄在这里找到的大量信息，将透明的 TV 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   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 直播供您参考。

问候

【问题讨论】：

【参考方案1】：

我可以看到的一个问题是您的电视图像比它需要的大，这意味着它变得有点困难。我会做以下更改。

容器（id="panel"）

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

电视画面

剪切它，使其左侧与右侧一样多，因此右侧的面板宽度应该与左侧一样“透明”。这样更容易对齐将其用作图像 (<img />) 而不是背景，这样它就会变得具有响应性并具有自然的高度（和宽度）。设置宽度width: 100%;（这是响应式部分）

视频

让它响应，查看this post （注意你不需要任何javascript，只需要html/css）居中

有了这个，您就可以选择响应式解决方案了。为您提供 css 和 html 中的更改会更容易一些，但为此您需要首先让电视图像具有正确的大小。希望这是有道理的！