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

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>

更新：

太好了，文字效果更好

小而大window (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 带有文本叠加的视频背景具有响应性

How to make HTML Video Background with Text Overlay responsive

html

css

html5-video