¿Quiere saber cómo abrir un video de YouTube en una ventana emergente en WordPress?

La caja ligera o ventana modal (emergente) 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 incluso formularios de registro. 

Pero, ¿sabías que también es posible usarlo para mostrar videos en WordPress ? No? 

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

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

Luego de vuelta a por qué estamos aquí.

Las razones por las que deberías usar un caja de luz para mostrar tus videos 

En las caja ligera son ventanas modales, sin embargo, lo que no sabe es que no todas las imágenes que se muestran en ellas se cargan durante la « carga«  página. 

Le navegante CHARGE los 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 sus páginas se abran más rápido. También te permitirá reducir el tamaño (longitud) De la páginaporque parte del contenido de esta página estará disponible en esta ventana modal.

Tregua de charla, vamos 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, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Después de activar el plugin, vaya a su página de configuración desde esta ubicación " Ajustes >> Vídeo caja ligera ".

Iremos directamente al " Foto bonita ".

En realidad, esto plugin usar otro plugin, que está destinado principalmente a 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 activado (comprobar « permitir Foto bonita »)Para que los usuarios sepan que están en la misma página, puede hacer que la ventana sea transparente (definir un valor de 0 a 1. Se aceptan valores de coma).

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

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

Para el ancho y la altura del caja ligera, puedes editar los campos " tu préstamo estudiantil anchura "Y" tu préstamo estudiantil altura ". 

Para elegir el tema de la caja ligera, cambia el menú desplegable tema ". También es posible activar la reproducción automática (marque la casilla " Autoplay »).

abre un video de Youtube en una ventana emergente - define-les-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] (pour YouTube)
[video_lightbox_vimeo5] (pour Vimeo)

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

  • Definir el identificador (video_id) de un video, generalmente en este formato " YzqKMmQ_3Sg ". Ejemplos [video_lightbox_youtub video_id = "YzqKMmQ_3Sg"]
  • Establecer la altura del video (altura)
  • Establecer el ancho del video (anchura)
  • Añadir una descripción (descripción)
  • Agregar un ancla HTML (ancla), o el texto del enlace 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 manejar códigos cortos WordPress

Demo de un 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=0width="640height="480anchor="Une simple vidéo" description="Par Dr WP"]

Por un resultado similar

presentación basada en los resultados

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

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

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  

Puedes usar otros plugins de WordPress para dar una apariencia moderna y optimizar el manejo de tu blog o sitio web.

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

1. FileBird

archivopájaro

¿Alguna vez ha tenido problemas para administrar miles de archivos de imágenes, videos o documentos que cargó en su FTP de WordPress? si o no, no importa, lo importante es saber que el Plugin de WordPress FileBird lo ayudará a administrar sus archivos multimedia con facilidad y brindará más poder a su biblioteca.

Su interfaz de usuario sin interrupciones y su menú contextual permiten a los usuarios arrastrar y soltar archivos en carpetas o tienen los derechos necesarios para crear, renombrar o eliminar carpetas rápidamente de la misma manera que lo hace en su computadora. Con este complemento en la mano, sus archivos multimedia se organizarán sistemáticamente y podrá seleccionar fácilmente una imagen para insertarla en una página o publicarla.

Descubre también nuestro 6 complementos de WordPress para dar nueva vida a sus artículos

Además, este complemento es totalmente compatible con los complementos más populares, especialmente con WooCommerce, y también es compatible con una gran cantidad de idiomas. Así que si quiere dar un empujón a la gestión de su biblioteca de medios, el Plugin de WordPress FileBird podría ser tu arma secreta.

DescargarDemo alojamiento web

2. Social Share & 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 requiriendo compartir en una de las redes sociales que ofrece.

Complemento de WordPress Social Share Locker Pro

Tiene 10 plantillas que deberían cubrir los deseos más comunes. Todos sus modelos son perfectos y funcionan de maravilla. Además, con Social Share & Locker Pro, podrás mostrar el nombre completo de las redes sociales o simplemente el icono. Dependerá de tu diseño, el espacio disponible o tu gusto.

Descargar | Demo | alojamiento web

3. Formulario de contacto 7 Tooltips

Esta Extensión de WordPress del complemento Contact Form 7 brinda una sencilla funcionalidad de información sobre herramientas para su complemento Contact Form 7. Su información sobre herramientas se mostrará cuando se desplace el cursor sobre el elemento de destino. En los dispositivos móviles, la información sobre herramientas indica cuándo se activa el elemento de destino.

Información sobre herramientas del Formulario de contacto 7

Sus principales características son: facilidad de uso, soporte para todas las versiones de Contact Form 7, personalización del color de fondo de la información sobre herramientas, soporte para código HTML, diseño completo receptivo y más.

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

Aquí! 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 con tus amigos en tus redes sociales favoritas

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éntenos sobre su comentarios y sugerencias en la sección dedicada.

...