Como deixar um vídeo iframe centralizado

Com o código abaixo você consegue inserir um vídeo iframe centralizado, em formato quadrado.

<style>
    .square-box {
      position: relative;
      padding-bottom: 100%; /* 1:1 */
      height: 0;
      width: 100%;
      overflow: hidden;
    }
    .threebytwo-box {
      position: relative;
      padding-bottom: 66.66%; /* 3:2 */
      height: 0;
      width: 100%;
      overflow: hidden;
    }
    .widescreen {
      position: absolute;
  	  padding-bottom: 100%; /* 16:9 * 9:16 ?? */
	  height: 0;
      left: 50%;
      top: 50%;
      width: 177.78%; /* 9:16 */
      transform: translate(-50%, -50%);
    }
    .widescreen2 {
      position: absolute;
	  height: 0;
      left: -38.88%;
      right: -38.88%;
    }
    .square-box .widescreen2 {
      padding-bottom: 100%; /* 1:1 ?? */
      left: -38.88%;
      right: -38.88%;
    }
    .threebytwo-box .widescreen2 {
      padding-bottom: 66.666%; /* 3:2 ?? */
      left: -9.25%;
      right: -9.25%;
    }
    iframe {
      left:0;
      top:0;
      height: 100%;
      width: 100%;
      position: absolute;
    }
  </style>

  <div class="square-box">
  <div class="widescreen">
  <iframe  style=""  src ="CODIGOIFRAME" width="100%" height="auto" scrolling="no" style="border:none;" sandbox="allow-scripts allow-presentation allow-same-origin" allow="autoplay; xr-spatial-tracking; encrypted-media; transparency" playsinline class="nolazy"></iframe>
  </div>
  </div>

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *