Con i CSS possiamo impostare un iframe a tutto schermo.
Partiamo dalla seguente marcatura:
<div id="video-wrap">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/sq51w34Hg9I?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Possiamo sfruttare le nuove unità di misura CSS relative alla viewport e la proprietà object-fit per fare in modo che il video occupi tutta la larghezza e l'altezza dello schermo.
html, body {
margin: 0;
padding: 0;
}
#video-wrap {
background: #000;
width: 100%;
height: 100vh;
}
#video {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
}