JSFiddle - React, Tailwind, and code Playground

HTML

<!--  Content  -->

<div class="video-background">
        <iframe src="https://www.youtube.com/embed/7Ij_xHqM78U?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe>
</div>

<article>

    <nav>
        <ul style="margin-left: auto; margin-right: auto;">
            <li>
                <a class="link" href="http://www.esensino.cz" target="_blank">Prohlédnout e-shop Esensino</a>
            </li>
            <li>
                <a class="link" href="#" id="popup" onclick="div_show()">Chci parfémy zdarma – registrovat se</a>
            </li>
            <li>
                <a class="link" href="/pdf/bonusovy-program-parfemy-zdarma.pdf">Podmínky programu PARFÉMY ZDARMA</a>
            </li>

            <li>
                <a class="link" target="_blank" href="https://youtu.be/6m47j2O0Is4">Spustit video znovu</a>
            </li>

        </ul>
    </nav>

</article>


<div id="abc">

    <div id="popupContact">
        <form action="/" method="post" id="frm-registraceForm">
            <img src="images/3.png" id="close" onclick ="div_hide()">
            <h2>Registrujte se pro parfémy zdarma</h2><hr>
            <input type="text" name="sponzor_id" placeholder="ID sponzora" id="frm-registraceForm-sponzor_id" required data-nette-rules='[{"op":":filled","msg":"Pole musí být vyplněno!"}]'>
            <input type="text" name="jmeno" placeholder="Jméno" id="frm-registraceForm-jmeno">
            <input type="text" name="prijmeni" placeholder="Přijmení" id="frm-registraceForm-prijmeni">
            <input type="text" name="adresa" placeholder="Adresa" id="frm-registraceForm-adresa">
            <input type="text" name="telefon" placeholder="Telefon" id="frm-registraceForm-telefon">
            <input type="text" name="email" placeholder="E-mail" id="frm-registraceForm-email">
            <br>
            <br>
            <input type="submit" name="send" class="submit" value="Registrovat se">
        <input...

CSS

.video-background {
  position: relative;
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden;
}

.video-background iframe,
.video-background object,
.video-background embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  /*  Background fallback in case of IE8 & down, or in case video doens't load, such as with slower connections  */
  background: #ffffff !important;
  background-attachment: fixed;
  background-size: cover;
  background-color: #ffffff !important;
}

* { box-sizing: border-box; }

.video-background {
  background: #ffffff !important;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

}

@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 400px) {
  .vid-info { width: 50%; padding: .5rem; }
  .vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
  .vid-info .acronym { display: none; }
}

/* These just style the content */
article {
  /*  just a fancy border  */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0px;

}

nav {
  position: absolute;
  top: 84%;
  font-size: 36px;
  letter-spacing: 3px;
  color: #000;
  font-family: Oswald, sans-serif;
  text-align: center;
}

h1 span {
  font-family: sans-serif;
  letter-spacing: 0;
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;

}

h1 span a {
  color: #000;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #666666;
}

li {
  float: left;
  margin-left: 10px
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  font-size: 14px;
  ;
}

li a:hover {
  background-color:...