Saltar al contenido principal

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

Divi: el tema de WordPress más fácil de usar

¿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 WordPress ? No?

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

Pero antes, si nunca has instalado WordPress, descubre Cómo instalar un blog de WordPress en pasos 7 et Cómo buscar, instalar y activar un tema de WordPress en tu blog

Luego de vuelta a por qué estamos aquí.

Las razones por las cuales debe usar un caja de luz para mostrar tus videos

Las caja ligera 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 « carga« 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 esta ventana modal.

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 WordPress, o descárgalo como un archivo .zip.

Para más detalles, echa un vistazo a nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de activar el plugin, ve a su página de configuración desde esta ubicación " ajustes >> Video 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.

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 valores de coma).

Descubrir Las características de una ventana emergente efectiva para WordPress

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

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

más 600.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]

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 códigos cortos que te permitirá mostrar caja ligera en artículos. Olvidé decirte que también puedes ver los videos disponibles en vimeo.

Para ver un video YouTube ou vimeodebes usar 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á:

  • 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 ».

Ve más allá descubriendo también Cómo usar y administrar códigos cortos en WordPress

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 "]

Cree fácilmente su sitio web con Elementor

Elementor le permite crear fácilmente cualquier diseño de sitio web con un aspecto profesional. Deja de pagar caro por lo que puedes hacer tú mismo. [Gratis]

Para un resultado idéntico a este

miniatura-duna-video

antes de salir

Cabe señalar que algunos parámetros en el códigos cortos sobrescribirá los definidos en la configuración.

Descubre también algunos complementos premium de WordPress

Puede usar otros complementos de WordPress para darle un aspecto moderno y optimizar el agarre de su blog o sitio web.

Aquí le ofrecemos algunos complementos premium de WordPress que lo ayudarán a hacerlo.

1. FileBird

¿Alguna vez ha tenido problemas para administrar miles de archivos de imagen, videos o documentos que ha cargado en su WordPress FTP? sí o no, lo que sea, lo importante es saber que el complemento FileBird WordPress lo ayudará a administrar sus archivos multimedia con facilidad y le dará más poder a su biblioteca.

Su interfaz de usuario y menú de menú sin problemas permiten a los usuarios arrastrar y soltar archivos en carpetas o tener los derechos necesarios para crear, cambiar el nombre o eliminar carpetas de la misma manera que lo hace en su computadora. Con este complemento en la mano, sus archivos de medios se organizarán sistemáticamente y podrá seleccionar fácilmente una imagen para insertar en una página o publicar allí.

Además, este complemento es totalmente compatible con los complementos más populares, especialmente con WooCommerce, y también soporta una gran cantidad de idiomas. Por lo tanto, si desea mejorar la administración de su biblioteca de medios, el complemento FileBird WordPress podría ser su arma secreta.

Descargar | Demo | Alojamiento web

2. Compartir y Social Locker Pro

La extensión Social Share & Locker Pro ha sido diseñada para ayudar a que su sitio web sea más visible en las redes sociales. Con solo unos pocos clics, puede establecer la posición de sus íconos sociales o bloquear su contenido al requerir compartir en una de las redes sociales propuestas por usted.

Tiene plantillas 10 que deben cubrir los deseos más comunes. Todos los modelos son perfectos y hacen maravillas. Además, con Social Share & Locker Pro, podrá ver el nombre completo de las redes sociales o solo el icono. Dependerá de su diseño, espacio disponible o sus gustos.

Descargar | Demo | Alojamiento web

3. Formulario de contacto 7 Tooltips

Esta extensión de WordPress del complemento Contact Form 7 proporciona una función para agregar fácilmente información sobre herramientas a su complemento Contact Form 7. Su información sobre herramientas se mostrará cuando el objeto de destino esté sobrevolado. En los dispositivos móviles, la información sobre herramientas indica cuándo está activado el elemento de destino.

Sus características principales son: facilidad de uso, compatibilidad con todas las versiones de Contact Form 7, personalización del color de fondo de la información sobre herramientas, compatibilidad con HTML, diseño de página completo responsivo, y mucho más.

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]

Descargar | Demo | Alojamiento web

Otros recursos recomendados

También lo invitamos a consultar los recursos a continuación para avanzar en el control y agarre de su sitio web y blog.

Conclusión

Listo ! Eso es todo por este tutorial, espero que te ayude a mostrar videos de Youtube o Vimeo en un lightbox en tu sitio web de WordPress. no dude en comparte el consejo con tus amigos en tus redes sociales.

Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress.

Pero mientras tanto, cuéntanos sobre tu comentarios y sugerencias en la sección dedicada.

...

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
Siguiente 2
WhatsApp