<div class="box">
      <video autoplay muted loop preload poster="https://www.apple.com.cn/v/iphone-12/g/images/overview/camera/night_mode_01__dg8mk3qbqhci_large.jpg">
          <source src="https://www.apple.com.cn/105/media/us/iphone-12/2020/7f5b7de7-9f8c-41eb-bf3b-f294773108e6/anim/video/large_2x.mp4" />
      </video>
    <i class="web-font">PEPSI</i>
  </div>

 @font-face {
      font-family: 'webfont';
      src: url('//at.alicdn.com/t/webfont_9fm5seiutdt.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/webfont_9fm5seiutdt.svg#杨任东竹石体-Bold') format('svg');
    }
body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  overflow: hidden;
}
    .box{
      width: 700px;
      height: 500px;
      position: relative;
    }
    video,
    i {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    i{
      display: block;
      font-family: webfont;
      font-size: 200px;
      font-weight: 700;
      line-height: 500px;
      text-align: center;
      background: white;
      mix-blend-mode: screen;
    }