Question

我无法使我的背景视频具有叠加和文本响应功能。减小分辨率宽度，文本不会按比例缩小，但是会被溢出的隐藏选项所截断。如果删除字体大小参数没有帮助

另外，如果我在Safari上尝试，视频也无法正常播放或完全无法播放结果是该页面在右侧被剪掉。

想法是www.fc-squad.de中间的图片应替换为视频。虽然该页面并不是真正负责任的，但只能使用“图片”。

p.S：可能我弄乱了很多代码，通过反复试验粘贴代码，如果结果不好则删除

/* ViDEO Background Section */

.callout {
    position: relative;
    overflow: hidden;
margin: 20px 20px 20px 20px;
min-width=600px:

}

 /* Style of the the video */
#myVideo {
  height: auto;
  width: auto;
  vertical-align: middle;
  width: 100%;
  height: 100%;
border: 1px solid slategrey;
border-radius: 5px;
   display:inline-block;
    overflow: hidden;
  z-index: -1000;


}

/* some content over the video */
.content {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25);
  color: #f1f1f1;
    width: 100%;
height: 100%;
  vertical-align: middle;
 text-align:center;
  align-items: center;
  justify-content: center;
text-shadow: 0px 0px 3px #272D0B;

}

<section class="callout">

<!-- The video -->
<video autoplay muted loop id="myVideo">
  <source src="squad-alpha11.mp4" type="video/mp4">
</video>

<!-- some overlay text to describe the video --!>
<div class="content">
  <span style="font-size:36px"><h1>TEXT TEXT TEXT</h1>
<span style="font-size:28px"><h2>TEXT TEXT TEXT</h2>
<span style="font-size:20px"><h3>TEXT TEXT TEXT</h3>
<span style="font-size:18px"><h4>TEXT TEXT TEXT</h4>


<a class="button" href="url-to-topic">Call to Action</a>
</div> 

</section>

更新：

太好了，文字的效果要好得多

小窗口和大窗口（Firefox），请参见此处视频容器的小分辨率和视频容器的中分辨率

但是“视频”和整个DIV部分在Safari / iOS上存在问题...是的，页面通常没有经过优化，但实际上是在向下渲染图片

但是视频被截断，不能自动播放（您必须快速播放），并且下面的文字不作为叠加层。 Safari屏幕

为了更好地为小屏幕制作静态图片，我已经读得更好，或者Safari是否有简单的解决方法？

Answer 1

如果问题只是文本没有调整大小，您可能想尝试使用 vw 而不是 px ，它会根据视图宽度缩小。

将文本范围替换为：

<span style="font-size:4vw"><h1>TEXT TEXT TEXT</h1>
<span style="font-size:3.2vw"><h2>TEXT TEXT TEXT</h2>
<span style="font-size:2.2vw"><h3>TEXT TEXT TEXT</h3>
<span style="font-size:1.7vw"><h4>TEXT TEXT TEXT</h4>

让我知道，因为我不了解视频本身是否也有问题。

Answer 2

使用的信息更新-更好的可搜索性

Text scales now on small resolution works also on medium

但是在Safari上仍然存在问题 Safari Cut of Video

如何使带有文本叠加层的HTML视频背景响应

2 个答案: