Centrar video usando CSS

1. Use las propiedades CSS margin-left y transform para centrar el elemento de video
2. Utilice las propiedades CSS de pantalla y margen para centrar el elemento de vídeo
3. Utilice las propiedades CSS width, justify-content y display para centrar el elemento de vídeo

En este artículo, el usuario aprenderá a centrar el elemento <video> usando solo CSS. Hemos explicado los múltiples métodos a continuación para centrar el video usando CSS.

Sin embargo, los usuarios pueden colocar el elemento <video> dentro de la etiqueta <center> y pueden centrar el elemento de video fácilmente. Pero en nuestro caso, no usaremos la etiqueta <center> ya que solo necesitamos usar las propiedades CSS.

Use las propiedades CSS margin-left y transform para centrar el elemento de video

Podemos usar las propiedades margin-left y transform de CSS para centrar el elemento de video sin usar la etiqueta HTML <center>.

La propiedad margin-left nos permite dejar espacio en el lado izquierdo del elemento. Usar el valor 50vw de la propiedad margin-left deja la mitad del ancho de la pantalla a la izquierda del elemento.

Aquí, vw en el valor representa el tamaño de la ventana de la pantalla.

La propiedad transform se usa para cambiar la posición de un elemento usando CSS. Si usamos translate(-50%) como valor de la propiedad transform, moverá el video en la dirección x negativa, lo que significa que el 50% del ancho del elemento de video se desplaza hacia la izquierda.

Por ejemplo, hemos creado las etiquetas <video> y <fuente> dentro de él para incrustar el video en el HTML. Después de eso, aplicamos algunas propiedades CSS a la etiqueta <video>.

Al aplicar la propiedad transform: translate(-50%), nos aseguramos de que la línea central del video anule la línea central de la pantalla.

Código HTML:

<video width="300" height="200" controls>
    <source
        src="https://www.youtube.com/watch?v=ZHumjSDbxUQ&ab_channel=DelftStack"
        type="video/mp4"
    />
</video>

Código CSS:

video {
    margin-left: 50vw;
    transform: translate(-50%);
}

Utilice las propiedades CSS de pantalla y margen para centrar el elemento de vídeo

Usaremos las propiedades CSS display y margin para centrar los elementos de video en esta parte.

Los usuarios pueden establecer el valor de la propiedad display para representar el elemento en la página web de acuerdo con sus requisitos. En nuestro caso, configuraremos display: block para mostrar elementos en el bloque.

Como se discutió en el ejemplo anterior, la propiedad margen nos permite establecer el espacio alrededor de los elementos. Estableceremos el valor margin: 0 auto en la propiedad margin.

Aquí, 0 representa que necesitamos establecer 0 espacios en la parte superior e inferior del elemento. El valor auto representa que necesitamos establecer el mismo espacio a la izquierda y a la derecha del elemento.

De esta manera, al establecer el mismo espacio a la izquierda y a la derecha del elemento, podemos centrar el video usando solo CSS.

Hemos creado el elemento HTML <video> en el siguiente ejemplo y hemos aplicado las propiedades CSS anteriores.

Código HTML:

<video width="300" height="200" controls>
    <source
        src="https://www.youtube.com/watch?v=ZHumjSDbxUQ&ab_channel=DelftStack"
        type="video/mp4"
    />
</video>

Código CSS:

video {
    display: block;
    margin: 0 auto;
}

Utilice las propiedades CSS width, justify-content y display para centrar el elemento de vídeo

En este ejemplo, crearemos el elemento HTML <div> y le asignaremos el nombre de clase contenedor. Agregaremos dos elementos <video> dentro del elemento <div>.

Aquí, accederemos al elemento <div> usando su nombre de clase para aplicar las propiedades CSS a todo el elemento <div>.

En CSS, usaremos la propiedad width:100%, que especifica que el ancho del elemento <div> con la clase container debe tener el mismo ancho que el ancho de la pantalla. Después de eso, usaremos la propiedad CSS justify-content: center, que nos permite centrar el contenido del elemento <div>.

Las propiedades display: flex y flex-direction: Row muestran ambos elementos <video> en una sola fila. Aquí, la propiedad justify-content juega el papel principal en el centrado de los elementos del <div>.

Podemos centrar el contenido del elemento <div> usando estas tres propiedades.

Código HTML:

<div class="container">
    <video width="300" height="200" controls>
        <source
          src="https://www.youtube.com/watch?v=ZHumjSDbxUQ&ab_channel=DelftStack"
          type="video/mp4"
        />
    </video>
    <video width="320" height="240" controls>
        <source
          src="https://www.youtube.com/watch?v=ZHumjSDbxUQ&ab_channel=DelftStack"
          type="video/mp4"
        />
    </video>
</div>

Código CSS:

.container {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-direction: row;
}

En la imagen de salida anterior, los usuarios pueden ver que ambos videos están en una sola fila y centrados en la pantalla.

Este artículo nos ha enseñado los tres métodos para centrar el elemento <video> usando CSS. Los tres métodos se pueden usar con otros elementos HTML para centrarlo, ya que no son elementos específicos.