Pregunta sobre a3 Lazy Load de Wordpress:

Cuando una opción de video está activada, la imagen de carga diferida es demasiado grande

Un usuario preguntó 👇

Soy el usuario de Divi Theme que le hizo la pregunta acerca de su plugin que funciona con el módulo de video Divi. Activé su plugin y encendí la opción Video / iframe.

Las miniaturas de video en la página son demasiado grandes y no pude averiguar cómo hacerlas receptivas usando CSS, ya que parece estar codificado en el iframe de carga diferida.

Vea la imagen del problema aquí
https://www.digitalsignageexpo.net/wp-content/uploads/a3_lazy_load_video_size_issue.jpg

En la pantalla tengo un ejemplo de cómo deberían verse los videos y cómo se ven cuando la opción de video / iframe está activada.

Debido a que la página está activa, ahora tuve que desactivar la opción de video / iframe.

Aprecio tu ayuda. CommMgr

(@commmgr)

Hace 10 meses, 2 semanas

Hola de nuevo…

También la ruleta y se desvanecen en un gran espacio cuadrado en el que debería estar la imagen. Esto está creando estragos con los logotipos que tengo en las diapositivas, ya que hace que el tamaño del control deslizante salte mientras se cargan los logotipos.

Vea una foto del problema aquí
https://www.digitalsignageexpo.net/wp-content/uploads/a3_lazy_load_attendee_logo_issue.jpg

Tuve que deshabilitar el enchufe del cargador perezoso ahora.

Apreciamos su ayuda. CommMgr

(@ jinsley8)

Hace 10 meses, 1 semana

Tengo el mismo problema con el módulo de video temático Divi.

Agrega altura y ancho a un iframe enorme.

(@ a3rev)

Hace 10 meses, 1 semana

Hola @ jinsley8

Lo siento, no tengo el tema divi para verificar cuál es el problema aquí. ¿Puedes vincular a una página de tu sitio donde pueda ver ese problema?

Steve

(@commmgr)

Hace 10 meses, 1 semana

Hola Steve …

Tuve que deshabilitar su plugin debido al problema porque esa página estaba activa. Jinsley8 puede tener una página que puede revisar.

Realmente quiero usar tu plugin, así que espero que puedas resolverlo.

CommMgr

(@ jinsley8)

Hace 10 meses, 1 semana

@ a3rev Esta página estará disponible en 24 horas, pero hay un video en esta página.

https://wordpress-239388-1181465.cloudwaysapps.com/

(@ a3rev)

Hace 10 meses, 1 semana

@ jinsley8 @commmgr

Gracias, miraste y se parece a Divi Video e iframe blockchain y agrega un atributo de ancho y alto. De la foto publicada por @commmgr y el video en su sitio tiene el mismo valor

Ejemplo
<div class="et_pb_video_box"><iframe class="lazy lazy-hidden" title="Computer Guided Bone Augmentation" width="1080" height="608" data-lazy-type="iframe"

a3 Carga perezosa cuando cambia la activación de src al ocupante muy pequeño y luego carga perezosa el src original nuevamente cuando está a la vista.

Está viendo el tamaño 1080 x 608 porque ese es el atributo src establecido por el módulo de video divi. a3 Una carga diferida no cambia eso, y carga esa cantidad porque eso es lo que src le dice al navegador que haga.

Al mirar el sitio @commmgr, veo que los videos no están realmente cargados, tiene una imagen residente ponderada. Luego, cuando se hace clic en la imagen, se carga el video iframe. ¿Es una característica perezosa de Divi para video o tiene un plugin instalado para hacer eso?

Si se trata de una carga lenta de video Divi, puede desactivar la función de iframe de video cargado a3 perezoso y usar la función de video divi.

Esta respuesta fue modificada hace 10 meses, hace una semana por.

(@ jinsley8)

Hace 10 meses, 1 semana

Este es el código de iframe cuando A3 Lazy Load está activo:

<div class="et_pb_video_box">
<iframe class="lazy-loaded" title="Computer Guided Bone Augmentation" width="1080" height="608" data-lazy-type="iframe" data-src="https://www.youtube.com/embed/Ho9bESMNmts?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" src="https://www.youtube.com/embed/Ho9bESMNmts?feature=oembed"></iframe>
<noscript><iframe title="Computer Guided Bone Augmentation" width="1080" height="608" src="https://www.youtube.com/embed/Ho9bESMNmts?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></noscript>
</div>

Ahora aquí está el código del módulo de video cuando la carga diferida está apagada:

<div class="et_pb_video_box">
<div class="fluid-width-video-wrapper" style="padding-top: 56.2963%;">
<iframe title="Computer Guided Bone Augmentation" src="https://www.youtube.com/embed/Ho9bESMNmts?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" name="fitvid0"></iframe>
</div>
</div>

Tiras de carga diferida que comparten la carpeta de video de ancho fluido y agregan ancho / alto.

(@commmgr)

Hace 10 meses, 1 semana

Primero, @ jinsley8… gracias por proporcionar una hoja de trabajo para que Steve pudiera ver un módulo de video Divi.

En segundo lugar, @ steve … en la primera imagen que publiqué, los videos en la parte superior de los videos parecen usar un módulo de video Divi. El módulo Divi solo tiene el tamaño correcto … y el tamaño responde.

Solo cuando activo su plugin, las imágenes en miniatura del video se amplían.

Vea esta imagen del código del módulo Divi, sin su plugin:
https://www.digitalsignageexpo.net/wp-content/uploads/a3_lazy_load_video_size_issue2.jpg

También hay una pregunta sobre el tamaño de su «ruleta» agregando un gran espacio gráfico al cargar una imagen, y si esa imagen no tiene la misma altura / ancho que el tamaño de su ruleta, hace que las imágenes se deslicen. saltando.

Gracias por tu ayuda. CommMgr

(@commmgr)

Hace 10 meses, 1 semana

@ jinsley8 … gracias por publicar ese código.

CommMgr

(@ a3rev)

Hace 10 meses, 1 semana

@commmgr @ jinsley8

Gracias por tu trabajo en esto.

A este respecto:

en la primera imagen que publiqué, los videos en la parte superior se parecen a los videos que usan el módulo de video Divi. El módulo Divi solo tiene el tamaño correcto … y el tamaño responde.

Solo cuando activo su plugin, las imágenes en miniatura del video se amplían.

Lo que hace el módulo de video divi es cargar la imagen de video primero: cuando hace clic en la imagen, carga el código incrustado de iframe de Youtube: este es el código que ejecuta divi cuando hace clic en la imagen

<div class="fluid-width-video-wrapper" style="padding-top: 56.2963%;">
<iframe title="Computer Guided Bone Augmentation" src="https://www.youtube.com/embed/Ho9bESMNmts?feature=oembed" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" name="fitvid0"></iframe>
</div>

Ese script que ejecutan al hacer clic elimina el atributo de ancho y alto del iframe de Youtube y agrega el script de fitvid.

a3 Lazy Loader no puede ver ese script, solo obtiene el video de Youtube incrustado en iframe que tiene el atributo de ancho y alto, por lo que el tamaño no responde.

No sé por qué no usan el script principal de WordPress incorporado para el módulo de video. Hay soporte automático para cambiar el tamaño. Para mostrarte lo que quiero decir, creé una página de demostración con @commmgr Youtubes.

WordPress 5.3.2 es la demostración con el tema predeterminado de 2019, utilicé Kadence Row Block para crear las tarjetas de video. La carga también es lenta en el sitio.

En el primer conjunto de bloques, los videos están incrustados con el bloque de Youtube de WordPress, simplemente agregue el bloque y copie la URL del video en él y haga clic en incrustar.

La segunda fila crea los videos copiando y pegando la URL del video de YouTube en un bloque de elementos. Las columnas se crean con el bloque en una fila.

Aquí hay un enlace a la exposición

Hay otra demostración que puede ver que muestra cómo se agrega el video al código incrustado de YouTube que tampoco puede cambiar de tamaño: es el tercer video y puede ver lo que quiero decir con escena del teléfono. este es ese programa. Ese se aplica a este ticket de soporte

En pocas palabras: así es como se hace el bloque Divi Video con el que ningún plugin de carga diferida puede funcionar (porque obtiene el iframe incrustado de Youtube que tiene un atributo de ancho y alto y eso es lo que cargan los navegadores ).

Lo único que puede cargar perezosamente el video en un tamaño receptivo es el script divi que está lejos de ser ideal.

Además, no excluyen ni el nombre de la clase ni el atributo universal que permitiría Lazy Loading a3 o cualquier otra carga diferida excluir los videos. Si esto estuviera presente, cualquier plugin de carga perezosa podría ignorar los videos y permitir que un divi perezoso los cargue.

Estos son: Exclusión por nombre de clase <video class="skip-lazy">
o Exclusión por atributos <video data-skip-lazy>

Si pudieran apoyar a uno de esos, todo estaría bien.

Espero que el conocimiento ayude

Steve

(@ jinsley8)

Hace 10 meses, 1 semana

Gracias por tu tiempo revisando esto. Puedo enviar este hilo al soporte de Divi ahora y ver qué tienen que decir al respecto.

(@ a3rev)

Hace 10 meses, 1 semana

Hola @ jinsley8

Está bien, déjame saber qué te devuelven.

Steve

(@ a3rev)

Hace 10 meses

Hola @ jinsley8

¿Tiene alguna actualización sobre los comentarios sobre esto de la gente de Divi?

Steve

(@ jinsley8)

Hace 10 meses

No, la compatibilidad con Elegant Themes no se utiliza.

Simplemente me dijeron que usara una carga lenta de Smush o Smush Pro. Es el mismo problema que causa esta carga perezosa.

Les dije esto y luego dijeron que deshabilitaran la carga de video perezosa en A3 entonces. Dije que lo estoy usando porque necesito un montón de videos.

Entonces me transfirieron a otro chico que luego dijo que solo usara uno de estos:
https://divi.space/plugins/top-6-lazy-load-plugins-to-make-your-wordpress-site-faster/

jaja, nada funciona.

(@ a3rev)

Hace 9 meses, 4 semanas

Hola @ jinsley8

Sí, dije en una respuesta anterior después de profundizar en el código de su módulo de video

En pocas palabras: así es como se hace el bloque Divi Video con el que ningún plugin de carga diferida puede funcionar (porque obtiene el iframe incrustado de Youtube que tiene un atributo de ancho y alto y eso es lo que cargan los navegadores ).

y ahora lo ha confirmado con su prueba.

El único trabajo que terminó y no sé si esto es algo que pueda hacer es reconstruir las páginas que tienen los videos con el editor de Gutenberg como les mostré en las 2 demostraciones en esta respuesta

Cambiaré el estado de sus boletos a ‘Planificado’…. Este no es el caso, pero debido a que se agotó todo el tiempo y pidió a los desarrolladores del Módulo de video Divi que hicieran algo con lo que los plugins de Lazy 3rd Party puedan trabajar, no hay nada más que podamos hacer.

Aún puede responder si lo desea.

Steve

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada.