Ajustar la relación de aspecto del vídeo de Elementor: garantizar una visualización perfecta en todos los dispositivos

Al construir un sitio web, el contenido de vídeo puede mejorar enormemente la experiencia del usuario, especialmente medianteElementordicho editor visual. PeroAl visualizar vídeo en diferentes dispositivos(matem.) géneroAjuste de la relación de aspectoEs importante. Ya seaVídeos de YouTube incrustadosTanto si está subiendo un vídeo local como si lo está haciendo, asegurarse de que el vídeo está correctamente proporcionado en todo tipo de pantallas es uno de los factores clave para mejorar la calidad de su diseño.

Este tutorial le llevará a cambiar la relación de aspecto de su vídeo Elementor fácilmente, ayudándole a conseguir un vídeo que se visualice perfectamente en todos los dispositivos.

Paso 1: Añadir widget de vídeo

En primer lugar, abra el editor de Elementor y busque el widget de vídeo. Puede añadir un vídeo de las siguientes maneras:

1. Busque "vídeo" en la barra de herramientas de la izquierda.

2. Arrastre el widget de vídeo al lugar de la página donde desee colocar el vídeo.

Paso 2: Configurar la fuente de vídeo

Elementor admite varias fuentes de vídeo, como YouTube, Vimeo, subidas locales, etc. Seleccione la fuente de vídeo según sus necesidades y pegue el enlace del vídeo o suba el archivo en el cuadro de entrada correspondiente.

Paso 3: Modificar la relación de aspecto del vídeo

Relación de aspecto del vídeo en ElementorEl ajuste por defecto es 16:9Esta es la relación de aspecto estándar actual para los vídeos web. Sin embargo, puede personalizar la relación de aspecto según sus necesidades de diseño. Siga los pasos que se indican a continuación para ajustarla:

1. Compruebe los widgets de vídeo que ha añadido.
2. A la izquierda del "tipo" En la pestaña, busque "relación de aspecto"Ajustes".

3. El valor por defecto es 16:9, pero puede introducir una relación de aspecto personalizada como 4:3, 1:1, etc.

3. Si introduceRelaciones de aspecto no estándarAsegúrese de que la previsualización es buena y pruebe la presentación del vídeo en distintos dispositivos.

Paso 4: Optimización adicional con CSS

A veces, los ajustes de relación de aspecto incorporados pueden no ser suficientes para sus complejas necesidades de diseño. En tales casos, puede ajustar aún más la proporción y el estilo del vídeo con la ayuda de CSS personalizado.

1. Haga clic en el widget de vídeo "alto nivel"Tab.
2. Deslícese hasta "CSS personalizado"Región.
3. Ajuste la relación de aspecto del vídeo introduciendo el siguiente código en el cuadro de entrada CSS personalizado:

selector iframe {
    aspect-ratio: 16 / 9; /* Ajústelo a la relación de aspecto que desee, por ejemplo 4 / 3 */
    width: 100%; height: auto; /* Ajústelo a la relación de aspecto que desee, por ejemplo 4 / 3 */
    anchura: 100%; altura: auto;
}

Este código obliga al vídeo a ajustarse automáticamente a la relación de aspecto establecida y a mantener la misma relación en todos los dispositivos.

Paso 5: Optimización con capacidad de respuesta

Una vez establecida la relación de aspecto de su vídeo, no olvide probar cómo se ve el vídeo en diferentes dispositivos.Elementor proporciona herramientas de diseño responsivo para facilitarle la previsualización de cómo se verá la página en diferentes pantallas:

1. En la barra de herramientas inferior de Elementor haga clic en "modo de respuesta".

2. Seleccione los modos escritorio, tableta y móvil para garantizar que el vídeo se visualiza correctamente en cada tipo de dispositivo.
3. Ajuste la relación de aspecto o los márgenes según sea necesario para garantizar que el vídeo mantenga una buena experiencia de visualización incluso en dispositivos de pantalla pequeña.

alcanzar un veredicto

Con la función de ajuste de la relación de aspecto del vídeo de Elementor, puede ajustar fácilmente la presentación de sus vídeos y lograr necesidades de diseño más avanzadas con CSS personalizado. Recuerde realizar pruebas en diferentes dispositivos para garantizar una experiencia de visualización coherente a sus usuarios.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres