全屏 YouTube 视频作为背景，没有 Share/Watch Later/Icon/Start 按钮

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 视频作为全屏背景，我阅读了很多文章并尝试过，但我只能删除控制栏，不是左边的图标，右边是分享和稍后观看，中间是开始按钮，我在项目上使用react，基本上只需要页面加载视频作为全屏背景，没有别的，有人可以帮忙吗？谢谢。

Answer 1

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

.ytp-share-button {
  display:none
}

全屏 YouTube 视频作为背景，没有 Share/Watch Later/Icon/Start 按钮

Fullscreen YouTube Video as Background without Share/Watch Later/Icon/Start Button

html

javascript

css

youtube

reactjs