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

【问题标题】：Fullscreen YouTube Video as Background without Share/Watch Later/Icon/Start Button全屏 YouTube 视频作为背景，没有共享/稍后观看/图标/开始按钮
【发布时间】：2019-05-03 01:19:35
【问题描述】：

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，基本上只需要页面加载视频作为全屏背景，没有别的，谁能帮忙请？谢谢。

【问题讨论】：

标签： javascript html css reactjs youtube

【解决方案1】：

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

.ytp-share-button {
  display:none
}

【讨论】：