时间戳

首页 > 解决方案 > YouTube 视频上的敲除文本

html - YouTube 视频上的敲除文本

问题描述

我想使用 YouTube 视频作为背景视频创建淘汰文本效果。我无法做到这一点，有人可以帮助我吗？是否可以在 CSS 端设置视频？

.backdrop{
  width: 100%;
  height: 100%;
}
.video-backdrop {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.text{
  height: 100%;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  color: white;
  background: rgba(0, 0, 0, 0.7);
  mix-blend-mode: multiply;
}
<div class="backdrop">
<iframe class="video-backdrop" frameborder="0" height="100%" width="100%" src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1&mute=1"></iframe>
<h1 class="text">Demo</h1>
</div>

标签： htmlcss

解决方案

互联网上有很多例子。我做了一个简单的例子，灵感来自 GeorgePark 笔，你可以在这里找到：https ://codepen.io/GeorgePark/pen/LBPJGV

秘诀是在视频顶部添加文字，使用属性mix-blend-mode: multiply;，元素乘以背景并替换背景颜色。生成的颜色始终与背景一样暗。由于我们的文本是白色的 (#fff)，结果将是它下面的视频。

这是一个简单的版本，您可以在此处找到：https ://codepen.io/diogoperes/pen/abzdYox

* {
	box-sizing: border-box;
}

body {
	font-family: Arial, sans-serif;
    height: 100vh;
	overflow: hidden;
}

/* Video */

.video-background {
  background: url(https://images.unsplash.com/photo-1519373344801-14c1f9539c9c?w=1920&h=1080&fit=crop&crop=bottom) no-repeat center;
  background-size: cover;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (min-aspect-ratio: 16/9) {
  .video-foreground {
	  height: 300%;
	  top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .video-foreground {
	  width: 300%;
	  left: -100%;
  }
}

/* Knockout Text */

.knockout-text {
	position: absolute;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
    font-size: calc(10px + 11vw + 2.5vh);
	font-weight: 900;
	letter-spacing: 0.15em;
    margin: auto;
	text-transform: uppercase;
	user-select: none;
    -webkit-text-stroke-color: #9f9f9f;
	-webkit-text-stroke-width: 0.015em;	
}

.dark-theme .knockout-text {
	background-color: #000;
    color: #fff;
    mix-blend-mode: multiply;
}
<body class="dark-theme">
    <div class="video-background">
        <div class="video-foreground">
            <iframe src="https://www.youtube.com/embed/bog4VzMWP20?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1&playlist=bog4VzMWP20" frameborder="0" allowfullscreen tabindex="-1"></iframe>
            <h1 class="knockout-text">KNOCKOUT</h1>
        </div>
    </div>
</body>

推荐阅读