title: Fullscreen YouTube Video as Background without Share/Watch Later/Icon/Start Button
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from "react";
  import tree from "../components/tree";
  
  function HomePage() {
    return (
      &lt;div className="screen"&gt;
      &lt;div className="videoContainer"&gt;
        &lt;iframe className="videoContainer_video" width="1920" height="1080" src="https://www.youtube.com/embed/ByG3b0nIT_M?modestbranding=1&amp;control=0&amp;autoplay=1&amp;showinfo=0&amp;autohide=1&amp;modestbranding=1&amp;fs=0&amp;loop=1&amp;rel=0" frameborder="0" allow="autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;"
      &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default HomePage;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/KoD2H.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KoD2H.jpg" alt=""></a>I'm working on a project that needs to use YouTube video as fullscreen background when user visits the page, I read through a lot of articles and tried, but I am only able to remove the control bar, not the icon of the left, share and watch later on the right, and the start button on the center, I'm using react on the project, basically just need the page to load with video as fullscreen background, nothing else, can somebody help please?  Thank you.</p>