Preact应用中的干/动荡背景视频 Template.html

如何解决Preact应用中的干/动荡背景视频 Template.html

我已经检查了许多其他有关干/断断续续视频的答案，但没有一个符合我的环境，也没有一个解决问题的方法。

我必须复制一个现有网站，该网站在iframe中播放循环播放的YouTube视频作为页面背景。在原始网站（以HTML / js / css格式创建）上，视频很流畅。在我的Preact应用中，视频非常不连贯（每秒少于10帧）。为了检验理论，我用相同的背景视频打开了一个快速的html / js / css页面，它很流畅。问题似乎出在Preact环境中。

我将背景视频从原先放置在其中的FunctionalComponent移到了路由组件，最后移到了调用其他所有内容的基本template.html文件中-影片的断续性没有明显区别视频。

有什么想法吗？有建议吗？

Template.html

<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="UTF-8" />
  <Meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <Meta http-equiv="x-dns-prefetch-control" content="on">
  <title>Example</title>
  <link rel="icon" type="image/png" href="./public/img/favicon.png"/>
</head>
<body>
    <!-- Tried both <video> and <iframe> -- both are equally choppy
    <video id="background-video" loop autoplay><source src='//www.youtube.com/embed/o79FNjx2y3Q?rel=0&autoplay=1&loop=1&mute=1&modestbranding=1&controls=0&showinfo=0&playlist=Eaj2WmFF7Z0' type='video/mp4' /></video>
    -->
    <iframe
    src='//www.youtube.com/embed/Eaj2WmFF7Z0?rel=0&autoplay=1&loop=1&mute=1&modestbranding=1&controls=0&showinfo=0&playlist=Eaj2WmFF7Z0'></iframe>
<style>
  iframe{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120%;
    border: 0;
    z-index:-1;
  }
</style>
<script src="./front/app.tsx"></script>
</body>
</html>