TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

YouTube, ventana emergente de video lightbox de Vimeo para Weebly

2

Weebly ofrece muchos elementos para incrustar videos en su sitio. Los elementos de código de inserción y YouTube están disponibles para usuarios gratuitos. El elemento de reproductor de video HD alojado solo está disponible para usuarios de planes profesionales y superiores. Pero todas estas opciones te permitirán incrustar videos en la página sin la posibilidad de mostrarlo en una caja de luz emergente. En este artículo, explicaremos cómo incrustar YouTube y Vimeo Video en una caja de luz emergente usando el widget jQuery.

Estas son algunas de las características del widget:

  • Puede vincular el widget a un texto, un botón o una imagen.
  • El video se abrirá en un modo emergente de caja de luz, siempre que los usuarios hagan clic en un enlace.
  • Es posible vincular YouTube, Vimeo o cualquier otra fuente de video.
  • Puede personalizar el ancho y el alto de la ventana emergente para ajustarlo al diseño de su sitio.
  • El widget tiene dos opciones para cerrar la ventana emergente, ya sea haciendo clic en el botón de cierre o haciendo clic en el área de superposición exterior.
  • La ventana emergente de video responde completamente y funciona en todos los dispositivos.

¿Cómo agregar un widget en el sitio Weebly?

Paso 1: descarga los archivos

El widget de caja de luz de video requiere script jQuery, CSS y HTML. Descargue el archivo zip "Video Lightbox.zip" haciendo clic en el botón de descarga a continuación.

Descomprima el archivo y extraiga los siguientes elementos:

  • video-popup.js
  • video-popup.css
  • close.png

Paso 2: carga de archivos en Weebly

El segundo paso es cargar todos los archivos en su sitio Weebly. Vaya a la pestaña "Tema" y haga clic en el botón " Editar HTML / CSS ". Se le dirigirá al editor de código Weebly y navegará a la sección "Activos". Sube los tres archivos y guarda tus cambios.

YouTube, ventana emergente de video lightbox de Vimeo para Weebly

Cargar archivos de widgets en Weebly

Nota: Si tiene muchos archivos cargados en la sección de activos, cree una nueva carpeta llamada "videolightbox" y cargue los archivos dentro de la carpeta.

Paso 3: enlaces para archivos cargados

Los archivos cargados tendrán los siguientes enlaces relativos:

  • /files/theme/video-popup.js
  • /files/theme/video-popup.css
  • /files/theme/close.png

También puede utilizar las URL absolutas como se muestra a continuación:

Si eso no funciona, haga clic con el botón derecho en el archivo cargado y copie la URL completa de Weebly. Debería verse como a continuación:

https://www.weebly.com/editor/uploads/4/8/5/3/4853992/custom_themes/881978474505006211/files/close.png

Recuerde utilizar la URL correcta en las siguientes secciones. Si tiene dudas, pegue la URL completa en el navegador y compruebe que puede ver el contenido.

Paso 4: vincular el script en la página de Weebly

En su sitio de Weebly, abra la página en la que desea insertar el widget de caja de luz de video y vaya a la sección "Configuración de SEO> Código de pie de página". Pegue el siguiente código para vincular el archivo de secuencia de comandos en el pie de página:

<script type="text/javascript" src="/files/theme/video-popup.js"></script>

YouTube, ventana emergente de video lightbox de Vimeo para Weebly

Agregar código de pie de página en la página de Weebly

Paso 5: vincular CSS en la página de Weebly

Agregue el siguiente código en la sección "Configuración de SEO> Código de encabezado" para vincular el archivo CSS.

<link rel="stylesheet" type="text/css" href="/files/theme/video-popup.css"></link>

Paso 6: insertar HTML

Vuelva al área de contenido de la página después de insertar el script y CSS. Arrastre y suelte un elemento de código de inserción e inserte el siguiente código HTML.

<!-- YouTube Popup as Button with Autoplay --> <div class="btn"> <a class="bla-1" href="https://www.youtube.com/watch?v=uWh8BYAnrR0">YouTube Video with Autoplay as Button Link</a> </div> <!-- YouTube Popup as Button without Autoplay --> <div class="btn"><a class="bla-2" href="https://www.youtube.com/watch?v=uWh8BYAnrR0">YouTube Video without Autoplay as Text Link</a> </div> <!-- Vimeo Popup as Text Link with Autoplay --> <p> <a class="bla-1" href="https://vimeo.com/81527238">Vimeo Video with Autoplay as Text Link</a> </p> <!-- Vimeo Popup as Text Link without Autoplay --> <p> <a class="bla-2" href="https://vimeo.com/81527238">Vimeo Video without Autoplay as Text Link</a> </p> <!-- YouTube Video Linked with Image without Autoplay --> <div> <a class="bla-2" href="https://www.youtube.com/watch?v=uWh8BYAnrR0"> <img src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88576-613230c13b5c8.jpg" width="300" height="150"></a> </div>

Paso 7: personalización del widget

  • Agregue solo el bloque requerido de HTML para insertar un botón, un enlace de texto o una imagen.
  • Reemplace la URL de la imagen y las URL del video por las suyas.
  • El ancho y la altura máximos de la ventana emergente se definen como 680px y 480 px respectivamente, que puede personalizar en el CSS.
  • Le recomendamos que utilice la ventana emergente de video sin opción de reproducción automática para ofrecer una mejor experiencia de usuario. También asegúrese de describir claramente que al hacer clic en el enlace se abrirá una ventana emergente.
  • El bloqueo de ventanas emergentes en los navegadores generalmente bloquea las ventanas emergentes que se abren en una nueva ventana. Esta ventana emergente de video funcionará incluso con la ventana emergente bloqueada por el usuario en el navegador.
  • Se hace referencia a este widget desde el widget de caja de luz de YouTube de jQuery y se modifica para adaptarse al sitio de Weebly. También puede usarlo en cualquier otra plataforma.
  • No puede usar esto con el elemento del reproductor de video Weebly Pro HD, ya que no obtendrá la URL del video subido cuando use ese elemento. El widget será útil, siempre que tenga la URL de un video.

A continuación se muestra cómo se verá el widget, haga clic en el enlace para ver la ventana emergente con efecto de caja de luz.



Video de Vimeo con reproducción automática como enlace de texto


Video de Vimeo sin reproducción automática como enlace de texto


Haga clic en la imagen de abajo para ver la ventana emergente del video de YouTube.

YouTube, ventana emergente de video lightbox de Vimeo para Weebly

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More