嵌入式YouTube视频加载两次

Question

我有一个网站，单击缩略图会打开一个嵌入式YouTube视频。这工作正常，但我注意到在加载带有视频的原始页面之前，它会加载没有源的YouTube视频页面。当我按浏览器上的“后退”按钮时，它会将我重定向到带有空白YouTube视频的页面，然后在播放时单击：“发生错误。请稍后重试”，当我再次单击后，将我带到带有缩略图的痛苦页面。

这是我嵌入视频的代码：

render() {
    return (
        <div class="videoWrapper">
        <iframe
         width="560"
         height="315"
         src={`https://www.youtube.com/embed/${this.state.house.uId}?autoplay=1`}
         frameborder="0"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
         </iframe>
         </div>
    )
}

有人知道为什么会这样吗？任何帮助表示赞赏。