Saltar al contenido principal

Cómo abrir un vídeo de Youtube en una ventana emergente en WordPress

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

La caja ligera o ventana modal (pop-up) es una característica muy común en la red. Sin embargo, generalmente se usa para mostrar imágenes, formularios de captura de correo electrónico, promociones o formularios de registro.

¿Pero sabes que también es posible usarlo para mostrar videos en COXNUMX ? No?

No se preocupe, en este tutoriel, Te mostraré cómo mostrar un video (Youtube - Vimeo, etc.) dans une caja ligera.

YouTube-vs-Vimeo

Antes de hacer nada, me gustaría decirte por qué debes usar un Lightbox para mostrar tus videos en WordPress. Las lighbox son ventanas modales, sin embargo, lo que no sabe es que no todas las imágenes que se muestran en él se cargan durante el "Cargando" página.

Le navegante cargo las imágenes cuando el caja ligera abre, este también es el caso de los videos. En resumen, es una característica que permitirá que tus páginas se abran más rápido. También te permitirá reducir el tamaño (longueur) De la páginaporque parte del contenido de esta página estará disponible en la ventana.

Tregua de charla, vayamos al grano.

Cómo instalar y configurar plugin WP Video Lightbox

WP Video Lightbox es una plugin disponible en WordPress.org. Lo que significa que puede instalarlo directamente desde su panel de instrumentos de WOrdPress, o descárgalo como un archivo .zip .

Después de activar el plugin, ve a su página de configuración desde esta ubicación " ajustes >> Videos caja ligera ».

Iremos directamente a la pestaña " Foto bonita ».

En realidad, esto plugin usar otro plugin, que está destinado principalmente para mostrar una galería de fotos. Pero puede cambiar parte de la información que se aplicará a los videos. Para eso, explicaré algunas opciones (Obligatorio)Así que es como desee.

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 554.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

Ya la librería Foto bonita debe estar activo (comprobar « permitir Foto bonita »). Para que los usuarios sepan que están en la misma página, podrá hacer que la ventana sea transparente (definir un valor de 0 a 1. Se aceptan archivos de coma).

Todas sus diapositivas pueden tener un título que se puede mostrar (Show título). A veces, para diapositivas grandes, deberá permitir el cambio de tamaño (permitir cambiar el tamaño). Y para videos más largos, los usuarios podrán agrandarlos (permitir Expandir), Mejor aspecto.

Para el ancho y la altura del caja ligera, puedes cambiar los campos " Por defecto anchura "Y" Por defecto altura ». Para elegir el tema de la caja ligera, modifica el menú desplegable tema ". También es posible activar la lectura automática (casilla de verificación " Autoplay ").

definir-the-regalges

Cómo mostrar un caja ligera en un artículo

Le plugin propone una lista de shorcodes que te permitirá exhibir caja ligera en artículos. Olvidé decirte que también puedes ver los videos disponibles en vimeo.

Para ver un video Youtube ou Vimeo, usas el códigos cortos suivant:

[video_lightbox_youtube] (Para Youtube)
[video_lightbox_vimeo5] (Para vimeo)

Cada uno de estos códigos cortos acepta parámetros, lo que le permitirá:

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [GRATIS]

  • Definir el identificador (video_id) un video, generalmente en este formato YzqKMmQ_3Sg ». Ejemplos [video_lightbox_youtub video_id = YzqKMmQ_3Sg "]
  • Establece la altura del video (altura)
  • Establecer el ancho del video (anchura)
  • Añadir una descripción (descripción)
  • Agregar un ancla HTML (ancla), o enlace de texto que abrirá la ventana
  • Añadir una miniatura (auto_thumb)

Si configura un ancla HTML, la miniatura se ignorará. En el caso contrario, auto_thumb toma el valor " 1 ».

Demostración de uso

Con lo que acabo de proporcionarle información, puede mostrar un video usando un código similar a este:

[video_lightbox_youtube video_id = "YzqKMmQ_3Sg & rel = 0 » width = "640 » height = "480 » ancla = "A video simple » description = »Por Dr. WP "]

Para un resultado similar

presentación basada en los resultados

Puede mostrar una miniatura como se muestra arriba con un código similar a este.

[video_lightbox_youtube video_id = "YzqKMmQ_3Sg & rel = 0 » width = "640 » height = "480 » auto_thumb = "1 » description = »Por Dr. WP "]

Para un resultado idéntico a este

miniatura-duna-video

Crea fácilmente tu blog con SiteGround

SiteGround le permite crear su blog de WordPress en unos pocos clics. Nombre de dominio gratis, alojamiento seguro, SSL, transferencia y mucho más ... [Recomendado]

antes de salir

Algunos parámetros en el códigos cortos sobrescribirá los definidos en la configuración.

Eso es todo por este tutorial, espero que te ayude a ver videos de Youtube o Vimeo en un caja de luz en su sitio de WordPress.

No te olvides de compartirlo si te gustó.

Este artículo contiene los comentarios 7
  1. Hola,
    Estoy buscando una manera de mostrar una ventana emergente de video después de hacer clic en un botón. ¿Es posible hacer eso con WP Video Lightbox?

    gracias,
    cordialement,

  2. Hola,
    Gracias por este tutorial bien construido, lo que quería saber si era posible añadir vídeos desde otras plataformas que no sean de YouTube y Vimeo (ejemplo openload) o si habría un límite.

    suyo

Dejar un comentario

Su dirección de correo electrónico no será publicada. Los campos necesarios están marcados con *

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Volver arriba
7 acciones
cuota5
Tweet
Guardar2
WhatsApp