Impostare un video a tutto schermo come sfondo della pagina web, caricare un font di Google e creare un bordo stondato

In questo video vedremo tre cose interessanti. Più precisamente andremo a giocare con l’HTML e il CSS per:

1. posizionare un video come sfondo della pagina html, mettendolo a tutto schermo
2. caricare un font da Google e assegnarlo al tag H1
3. creare un bordo stondato

Qui sotto il codice che ho scritto nel video

HTML

<div class="contenitore">
  <video muted autoplay loop class="videofullscreen">
    <source src="https://s3.amazonaws.com/akamai.netstorage/HD_downloads/Orion_SM.mp4" type="video/mp4">
  </video>
  <div class="titolo"><H1>SPACE X</H1></div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

html, body {
  height:100%;
  margin:0;
}
.contenitore{
  height:100%
}
.videofullscreen{
  position:absolute;
  overflow: hidden;
  width:100% !important;
  height:100% !important;
  object-fit: cover;
  z-index: -100;
}
.titolo{
  position: absolute;
  color:#FFFFFF;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  border:10px solid;
  border-radius: 25px;
  padding:20px;
}
h1 {
  font-family: 'Open Sans', serif;
  font-size:90px;
}