Centrar un video en HTML

1. Use las propiedades CSS de margin, width y display para centrar el video en HTML
2. Use la etiqueta center para centrar video en HTML
3. Use la propiedad CSS text-align para centrar el video en HTML

Este tutorial discutirá algunos métodos para centrar un video en HTML.

Use las propiedades CSS de margin, width y display para centrar el video en HTML

Podemos usar la combinación de las propiedades CSS margin, width y display para centrar un vídeo en HTML. Usamos la propiedad margin para establecer el margen de un elemento en las cuatro direcciones.

Usaremos la propiedad para aplicar margen a la etiqueta video en este método. Podemos usar la propiedad width para darle a un elemento un cierto ancho.

Podemos establecer el ancho en varias unidades como px, em e incluso porcentaje. Veremos la diferencia entre el uso de estas unidades en el siguiente ejemplo.

La propiedad display es esencial para configurar la visualización del comportamiento del elemento seleccionado. Toma valores como block, inline-block e inline.

Finalmente, usamos la etiqueta video para insertar un video en HTML.

Por ejemplo, escriba una etiqueta de video en HTML con una clase center. Primero, especifique la URL correcta del archivo de video en el atributo src.

A continuación, escribe el atributo controls y cierra la etiqueta video. Seleccione la etiqueta center en CSS y aplique la propiedad margin.

Establezca el valor de la propiedad en 0 auto y asigne al video un ancho de 300px. Finalmente, establezca la propiedad display en block.

Ahora, describiremos lo que hicimos en los pasos anteriores. El atributo controls en la etiqueta video mostrará los controles para pausar, reproducir, deslizar, aumentar y disminuir el volumen y alternar pantalla completa.

Si eliminamos el atributo controls de la etiqueta, la barra de control desaparecerá en el video.

La propiedad margin de CSS establecerá los márgenes superior e inferior en 0. Los márgenes izquierdo y derecho se establecen en auto.

Significa que el video tomará el ancho especificado de 300px, y el resto del espacio se divide por igual y se establece como los márgenes izquierdo y derecho.

El elemento de video se configura como un elemento a nivel de bloque para que el video ocupe el espacio de todo el bloque. Permite que las propiedades por delante entren en vigor.

Por lo tanto, podemos centrar un video en HTML usando las propiedades CSS como las propiedades margin, width y display.

Código de ejemplo:

<video class="center" src="pointing_pink.mp4" controls></video>

.center{
 margin: 0 auto;
 width: 300px;
 display: block;
}

Sin embargo, este método tiene un inconveniente. En el ejemplo anterior, hemos utilizado la unidad px en width.

Cuando cambiamos el tamaño de la ventana del navegador o navegamos por el sitio web desde la vista móvil, el video no responderá.

Podemos usar % o vw en la propiedad width para resolver este problema. Cuando usamos estas unidades, el elemento de video responde.

Veamos el ejemplo a continuación.

.center{
 margin: 0 auto;
 width: 40%;
 /* widht:40vw */
 display: block;
}

Use la etiqueta center para centrar video en HTML

También podemos usar la etiqueta HTML center para centrar un elemento en HTML.

La etiqueta se usó hasta HTML4. Los navegadores modernos no admiten la etiqueta.

Sin embargo, algunos navegadores antiguos aún lo admiten. Por lo tanto, se recomienda no utilizar la etiqueta center para centrar un elemento en HTML.

De todos modos, analizaremos el uso de la etiqueta para centrar un video en esta sección.

Por ejemplo, cree una etiqueta de video e inserte un video. Usa la propiedad width para darle un cierto ancho al video.

A continuación, envuelva la etiqueta video con la etiqueta center. Por lo tanto, el video estará centrado.

<center>
 <video class="center" src="pointing_pink.mp4" controls width="300"> </video>
</center>

Use la propiedad CSS text-align para centrar el video en HTML

Como se mencionó anteriormente, se desaconseja el uso de la etiqueta center. Una alternativa a la etiqueta center es usar la propiedad CSS text-align.

Podemos establecer la propiedad text-align para centrar el elemento en el centro. Podemos implementar esta técnica para centrar el video.

Luego, podemos envolver el video en un contenedor y aplicar los estilos.

Por ejemplo, crea un div con la clase center. Dentro del div, cree una etiqueta de video para insertar el video.

Puede establecer el ancho del video en HTML o usar la propiedad width de CSS. En CSS, seleccione la clase center y establezca la propiedad text-align en center.

Así, el vídeo quedará centrado.

Código de ejemplo:

 <div class="center">
 <video src="pointing_pink.mp4" controls width="400"></video>
 </div>

.center{
 text-align: center;
}

Este artículo nos enseñó tres formas diferentes de centrar un video en HTML. Usamos la propiedad margin, la etiqueta center y la propiedad text-align para centrar el video en HTML.