Ir al contenido principal

Cómo Abrir Vídeos de YouTube en una Ventana Emergente Pop-up: ¡Descubre el Truco para Enganchar a tu Audiencia!

 


¿Te gustaría destacar tus videos de YouTube de una manera llamativa en tu blog? ¡Estás en el lugar correcto! En este tutorial, te enseñaremos cómo abrir vídeos de YouTube en una ventana emergente pop-up con un diseño moderno y no intrusivo. Prepárate para impresionar a tus lectores y aumentar la interacción con tus contenidos multimedia. ¡Vamos a sumergirnos en el fascinante mundo de los pop-ups!

Paso 1: Copiar y Pegar el Código HTML

Entra en la sección "Vista HTML" de la edición de entradas en tu blog de Blogger. Copia y pega el primer código HTML proporcionado a continuación. Este código es la clave para activar la ventana emergente que resaltará tu video.

Paso 2: Elige tu Video y Reemplaza los Detalles

Selecciona el video de YouTube que deseas mostrar en la ventana emergente. Copia la identidad del video y reemplázala en el código. Además, modifica el enlace URL de la imagen que se mostrará como el enlace de apertura para el pop-up.

Paso 3: Ajusta las Medidas y Opciones

¿Quieres personalizar las dimensiones de tu ventana emergente? ¡Es fácil! Modifica los valores de ancho (width) y alto (height) según tus preferencias. Este paso te permite adaptar la experiencia visual a tu gusto.

Paso 4: Reproducción Automática (Opcional)

Si deseas que el video se reproduzca automáticamente al abrir la ventana emergente, utiliza el segundo código HTML proporcionado a continuación. ¡Haz que tus videos cobren vida sin que tus visitantes tengan que hacer clic!

Paso 5: Guarda y Observa los Resultados

¡Guarda tus cambios y observa cómo tus videos de YouTube se vuelven irresistibles para tus lectores! Este truco no solo atraerá la atención, sino que también mejorará la experiencia de usuario en tu blog. ¡Prueba estos códigos y eleva el nivel de tu contenido multimedia ahora mismo!
¿Te ha resultado útil este tutorial? Cuéntanos cómo te fue implementando esta sorprendente función en tu blog de Blogger. ¡Nos encantaría saber tu experiencia! ¡Hasta la próxima lectura cautivadora!
Labels:

Comentarios

Publicar un comentario

Entradas populares de este blog

PRO Elements - La alternativa GPL a Elementor PRO

Desbloquea Elementor Pro Gratis GPL ¿Qué es Elementor PRO? Elementor FREE es un plugin gratuito para WordPress que permite a los usuarios crear y maquetar páginas web de forma fácil y rápida. Al utilizar Elementor, los usuarios pueden crear sitios web profesionales y píxel perfectos con un maquetador visual de arrastrar y soltar, sin necesidad de conocer código. Elementor también ofrece una amplia gama de plantillas y extensiones, lo que permite a los usuarios personalizar y ampliar sus sitios web de manera sencilla. Elementor Pro es la versión de pago de Elementor y viene con características adicionales como widgets adicionales, soporte premium y una biblioteca de plantillas completa. Algunas de las funciones adicionales incluidas en Elementor Pro son la posibilidad de crear tipos de entrada personalizados, controles de diseño avanzados y acceso a plantillas premium. Además, Elementor Pro incluye soporte para WooCommerce, lo que permite a los usu
Publicar un comentario
Leer Articulo »

Cómo poner una pagina web dentro de otra con iframe

¿Quieres mostrar una página web externa, dentro de tu propio sitio web? Descubre cómo puedes hacer esta sencilla tarea con un simple código HTML. ¡Hola SEO Nauta! En este artículo, te voy a enseñar cómo puedes insertar o poner un sitio web externo dentro de tu sitio web. Esto es una tarea que se conoce como embeber una página web dentro de otra. Esta es una función muy usada, sobre todo en páginas web de juegos online, tipo minijuegos. Usando HTML para embeber otra web dentro de la nuestra <iframe> Para mostrar un sitio web dentro de otro, vamos a usar una etiqueta HTML <iframe>. Esta etiqueta HTML sirve para incrustar diferentes tipos de contenidos dentro de una página web. Con la etiqueta <iframe> podemos incrustar documentos de texto, documentos de Word, PowerPoint, Excel, PDF, otros sitios web, flash... ¡Las posibilidades son infinitas! ¿Cómo emplear la etiqueta <iframe>? Para empezar a us
Publicar un comentario
Leer Articulo »

Redondea las esquinas de las imágenes con CSS y Elementor

¿Quieres saber cómo puedes redondear las esquinas de las imágenes de tu página web? Descubre cómo puedes hacerlo tú mismo con este sencillo código en CSS. ¡Hola SEONauta! En este artículo rápido sobre diseño web, os voy a enseñar cómo podéis redondear las esquinas de todas las imágenes de vuestra página web. Este es un efecto bastante sencillo de realizar y solo tendremos que irnos al editor CSS de WordPress y pegar un código CSS. ¿Quieres saber cómo redondear las esquinas de las imágenes con CSS? Cómo Redondear las Esquinas de las Imágenes en WordPress con CSS Vale, como siempre, tendremos que ir a APARIENCIA → PERSONALIZAR → EDITOR CSS Después pegamos este código CSS en el editor. Con esto conseguimos que las imágenes queden con los bordes redondeados. img { border-radius: 20px; } Para modificar el radio del redondeo, tendremos que modificar el valor 20px por el valor que deseemos. Si le ponemos 100px, la imagen formar
Publicar un comentario
Leer Articulo »