全屏YouTube视频作为背景，没有共享/稍后观看/图标/开始按钮

Question

import React from "react";
import tree from "../components/tree";

function HomePage() {
  return (
    <div className="screen">
    <div className="videoContainer">
      <iframe className="videoContainer_video" width="1920" height="1080" src="https://www.youtube.com/embed/ByG3b0nIT_M?modestbranding=1&control=0&autoplay=1&showinfo=0&autohide=1&modestbranding=1&fs=0&loop=1&rel=0" frameborder="0" allow="autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>"
    </div>
    </div>
  );
}

export default HomePage;

.videoContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

iframe {
    width: 100%;
    height:100%
}

.screen {
    position: fixed;
    z-index: -99;
    width: 100%;
    height: 100%;
}

，我正在一个项目中，当用户访问页面时，该项目需要使用YouTube视频作为全屏背景，我通读了很多文章并尝试过，但我只能删除控制栏，而不是左侧的图标，而是在右侧共享和稍后观看，以及中心的开始按钮，我正在对项目进行反应，基本上只需要页面以全屏背景加载视频即可，可以有人帮忙吗？谢谢。

Answer 1

这是因为默认情况下，YouTube嵌入链接会自动内置这些功能。您可以通过访问this / embed /示例来查看此内容。因此，简而言之，您需要更新src链接，或仅使用CSS选择器之类的东西来忽略与以下类对应的按钮标签：ytp-share-button和ytp-watch-later-button。你可以做这样的事情...

.ytp-share-button {
  display:none
}