Seleccionar página

En este post vamos a ver diferentes formas de insertar un vídeo de YouTube en WordPress. También veremos cómo cambiar diferentes características del vídeo incrustado en WordPress como sus dimensiones (ancho y alto), grosor del borde, etc.

Lo primero que tenemos que tener en cuenta es que NO es necesario instalar ningún plugin para poder insertar un vídeo de youtube en WordPress.

Para los fanáticos de la plantilla Divi, entre los que me incluyo, también veremos el módulo Vídeo del Divi Builder y cómo nos va a permitir insertar vídeos de YouTube y Vimeo, y personalizar diferentes aspectos de estos.

 

Aprende en este post a crear un slider de vídeos o lista de reproducción con WordPress y Divi: Slider Vídeos

 

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

 

 

 

1.- Insertar un vídeo de YouTube en WordPress a través de su URL

 

Esta forma de insertar un video de YouTube en un post o una página de WordPress se realiza insertando la url del vídeo de youtube en el editor de texto de WordPress.

Esta forma de insertar vídeos no nos permitirá modificar aspectos del vídeo como sus dimensiones, anchura de borde, mostrar u ocultar vídeos relacionados, etc. Para esto usaremos otra manera diferente de insertar los vídeos que veremos en el siguiente apartado.

 

La url tendrá el siguiente formato:

https://www.youtube.com/watch?v=xxxxxxxxxxx

Donde «xxxxxxxxxxx» será la parte que diferencia un vídeo de otro.

 

Esta url aparece en la parte superior del navegador cuando estamos visualizando un vídeo en YouTube.

 

url vídeo youtube insertar video

URL del vídeo de YouTube, que copiaremos y pegaremos en el editor de WordPress

 

Procederemos a copiar la URL del vídeo de YouTube y a pegarla en el editor de WordPress. En las últimas versiones de WordPress es indiferente pegar la URL en la pestaña «Visual» o «HTML» del editor de WordPress.

A continuación, realizaremos una previsualización de la página o post para ver como ha quedado el vídeo de YouTube incrustado en la página de WordPress.

NOTA: antes si se podían incluir diferentes atributos para personalizar diferentes aspectos del vídeo. En el momento de escribir este post, para personalizar diferentes características de la inserción del vídeo es necesario utilizar el procedimiento del siguiente apartado

 

 

2.- Insertar código IFrame del vídeo YouTube en WordPress

 

Otra forma de insertar un vídeo de YouTube, es insertándolo o incrustándolo como un iframe. En este caso, posteriormente podremos personalizar algunas características del vídeo, como sus dimensiones, bordes, si muestra vídeos sugeridos a la finalización del vídeo, etc.

Para insertar un vídeo de YouTube a través de su iframe iremos en primer lugar a YouTube y buscaremos el vídeo. A continuación, haremos clic en el enlace «Compartir» que aparece situado en la parte derecha debajo del título del vídeo.

 

insertar vídeo de youtube en WordPress, etiqueta iframe

Botón COMPARTIR para insertar vídeo de YouTube en WordPress

 

En la ventana emergente que aparecerá haremos clic en el botón: «Insertar» (< >).

 

Insertar vídeo YouTube en página web WordPress

Insertar vídeo YouTube en WordPress

 

A continuación, nos aparecerá una ventana emergente con un código y una serie de opciones situadas debajo de dicho código.

Primero debemos seleccionar las opciones de inserción del vídeo y posteriormente copiar el código. Entre las opciones de inserción encontramos las siguientes:

 

i.- Empezar en: si marcamos esta opción y ponemos un periodo de tiempo, cuando activemos la reproducción del vídeo desde la página web, éste empezará desde el minuto que hayamos señalado. Es decir, si marcamos el checkbox y ponemos 0:05, cuando comience la reproducción del vídeo, éste empezará por el segundo 5 en vez del segundo 0.

ii.- Mostrar sugerencias de vídeos cuando finalice la reproducción: si marcamos esta opción cuando finalice el vídeo insertado se mostrarán otros vídeos sugeridos por YouTube (pueden ser de otros). Lo habitual es desmarcar esta opción.

iii.- Mostrar los controles del reproductor: cuando se comienza a reproducir un vídeo insertado de YouTube en una web se muestran en la parte inferior una serie de controles como son: el play, selector de volumen, icono para ver en pantalla completa y otras opciones. Pues bien, si NO marcamos este checkbox, ninguno de estos controles se mostrará en el vídeo insertado.

iv.- Mostrar el título del vídeo y las acciones del reproductor: Si desmarcamos esta opción, no se mostrará en la parte superior del vídeo incrustado el título del vídeo y algunas opciones del reproductor

v.- Activar el modo de mejora de la privacidad: si marcamos esta opción, youtube no utilizará cookies para conocer los hábitos de visualización del visitante de la web.

Una vez hayamos marcado las opciones de inserción que hayamos querido, copiaremos el código y lo pegaremos en nuestro editor de WordPress.

 

copiar código vídeo para insertarlo en wordpress

Copiar código iframe del vídeo de YouTube

 

Una vez copiado el código, procederemos a pegarlo en la página o entrada de blog de WordPress. Pero, usaremos la pestaña HTML del editor.

 

pegar código vídeo en wordpress

Pegar código del vídeo en la pestaña HTML del editor de WordPress

 

 

2.1.- Personalizar características del vídeo insertado de YouTube

 

Ahora vamos a ver una serie de atributos (códigos) que se pueden añadir al código del vídeo que hemos copiado y pegado en WordPress, para modificar las características del mismo. Dependiendo de la plantilla utilizada en WordPress, es posible que algunas personalizaciones pudieran no funcionar correctamente.

 

 

2.1.1.- Reproducción automática del vídeo insertado de YouTube

 

Para hacer que el vídeo insertado en WordPress se reproduzca de manera automática. Es decir, no sea necesario que el visitante haga clic en el vídeo para que comience la reproducción de éste, haremos lo siguiente:

Si te fijas en el código de inserción copiado de YouTube y pegado en WordPress, la URL del vídeo de YouTube aparece dentro del atributo SRC. Sería algo así:

src="https://www.youtube.com/embed/12_NMeM2baY?rel=0&autoplay=1"

 

Pues bien, al final de la URL del vídeo incluiremos el código siguiente:

&autoplay=1

Es decir, la parte del código de inserción correspondiente al atributo SRC quedaría de la siguiente manera:

src="https://www.youtube.com/embed/12_NMeM2baY?rel=0&autoplay=1"

 

NOTA: Funciona correctamente con la plantilla Divi

 

 

2.1.2.- Cambiar altura y anchura del vídeo insertado en WordPress

 

En el código de inserción que hemos copiado en YouTube y pegado en WordPress puedes observar dos atributos importantes:

i.- width: este atributo representa la anchura en píxeles del vídeo insertado. Por defecto, la anchura del vídeo que seguramente se te mostrará es width=»560″, pero puedes cambiarla y poner la anchura que quieras. Modifica el valor del atributo width directamente en el código que has pegado en WordPress.

Nota: la personalización de este atributo no funciona correctamente con la plantilla Divi. Más adelante veremos el módulo de Vídeo de Divi ,con el cual podremos insertar un vídeo de YouTube o Vimeo y personalizar las dimensiones del vídeo y muchas otras cosas.

 

ii.- height: representa la altura en píxeles del video incrustado a través del código iframe. Por defecto, la altura que te aparecerá será: height=»315″, pero puede cambiar el valor del atributo height y por el valor que quieras.

 

 

2.1.3.- Añadir marco perimetral al vídeo incrustado

 

El atributo en relación al marco del vídeo es el atributo: frameborder. Si en el código de inserción tenemos el atributo con el valor 0. Es decir, frameborder=»0″, no se mostrará ningún borde perimetral al vídeo.

Si por el contrario el atributo frameborder tiene el valor 1. Es decir, frameborder=»1″ si se debería mostrar un marco perimetral al vídeo.

Nota: este atributo no funciona correctamente con la plantilla Divi y su estética dependerá de la plantilla utilizada. En el siguiente apartado veremos cómo insertar un vídeo YouTube o Vimeo con Divi y personalizar su diseño.

 

 

3.- Módulo vídeo del Divi Builder de la plantilla Divi (insertar vídeo YouTube y Vimeo)

 

Como hemos visto antes existen opciones de personalización de la inserción de vídeos de YouTube a través de un Iframe que no funcionan correctamente con la plantilla Divi. Pero, con Divi disponemos de un módulo del page builder denominado: «Vídeo», en el cual podremos mostrar un vídeo insertado de YouTube o Vimeo con un montón de opciones de personalización.

Vamos a ver el proceso de inserción de un vídeo de YouTube o Vimeo, y las opciones de personalización de ese vídeo:

 

a.- Añadir módulo Vídeo: lo primero que debemos hacer es acceder a la página de WordPress en la cual queremos insertar el vídeo. A continuación, añadiremos el módulo Vídeo y procederemos a configurarlo.

 

b.- Vídeo MP4 URL: en la pestaña contenido encontrarás un apartado denominado: “Vídeo MP4 URL”. Haremos clic en el botón “Add Vídeo” y en la ventana emergente haremos clic en el elemento del menú lateral denominado: “Insertar desde URL”.

A continuación, introduciremos la URL del vídeo de YouTube que queremos insertar en la página. La URL del vídeo de YouTube es la que tienes en la barra de navegación.

 

url video youtube

URL del vídeo de YouTube que queremos insertar en página

 

c.- Capa superpuesta: dentro de la pestaña contenido tenemos la opción de añadir una imagen de portada al vídeo. Para ello haremos clic en “Add Image” («URL imagen de cobertura” y elegiremos o subiremos una imagen). Esa imagen quedará como carátula o cobertura del vídeo de YouTube que hemos insertado.

Nota: también tenemos la opción de que esta imagen se genere automáticamente haciendo clic en el botón “Generar desde vídeo”.

 

añadir imagen incial personalizada del vídeo

Añadir una imagen de presentación o cobertura al vídeo insertado desde Youtube o Vimeo

 

d.- Icono de reproducción: en caso de haber añadido una cobertura personalizada para el vídeo, en la pestaña “Diseño” encontrarás un apartado denominado: “Icono de reproducción” y una opción denominada: “Color de icono de reproducción”, donde podrás personalizar el color del icono de reproducción.

Nota: esta opción no es válida si no hemos añadido una imagen de cobertura personalizada para el vídeo incrustado.

 

e.- Tamaño del vídeo: dentro de la pestaña “Diseño” encontrarás un apartado denominado: “Tamaño” con un selector con el nombre: “Width”. Con este selector podrás personalizar el tamaño del vídeo insertado.

Podrás personalizar el tamaño del vídeo insertado de manera independiente para escritorio, Tablet o móvil.

Nota: el tamaño del vídeo siempre tendrá como tamaño máximo el contenedor (columna) en el que esté insertado el módulo Vídeo.

 

f.- Alineación del vídeo: justo debajo de selector “Width” que hemos visto en el apartado anterior, tienes la opción “Module Alignment” que nos permitirá centrar el vídeo en el contenedor o columna en el que está insertado. Esta opción tiene sentido si hemos cambiado el tamaño del vídeo.

 

g.- Bordes y esquinas: dentro de la pestaña diseño tenemos el apartado “borde” donde podremos personalizar el color y grosor de un borde perimetral o lateral (opcional) y la posibilidad de establecer un radio de curvatura en las esquinas del rectángulo que conforma el vídeo (Rounded corners).

 

En este post tienes más información sobre el uso de esta herramienta para crear bordes con la plantilla Divi: Gestión de bordes con Divi

 

Nota: en el momento de escribir este post cuando se modificar el radio de curvatura de las esquinas el tamaño de la imagen en el previsualizador se modifica, pero si hacemos una vista previa real no se produce dicho cambio en el tamaño del vídeo.

 

cambiar borde video y linea lateral

Personalizar borde permitral y curvatura en las esquinas del vídeo

 

h.- Sombreado: en el apartado “Box Shadow” situado dentro de la pestaña diseño encontrarás diferentes opciones para añadir un sombreado exterior al vídeo.

 

En este post tienes más información sobre la creación de sombras con la plantilla Divi y el Box Shadow: Sombras Box Shadow Divi

 

i.- Animación: en el apartado “Animación” situado en la pestaña diseño podrás introducir una animación para mostrar el vídeo insertado cuando se cargue la página.

 

vídeo de youtube insertado y personalizado con divi

En este vídeo insertado de YouTube hemos personalizado la imagen de cobertura, icono reproducción, borde y sombreado

 

Aprende todos los destalles de animación de elementos crados con Divi: animación elementos divi builder

 

 

Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO WORDPRESS (44 Clases)
2.- CURSO SEGURIDAD Y ACTUALIZACIONES WORDPRESS (9 Clases)
3.- CURSO DIVI (33 Clases)
4.- CURSO DISEÑADOR WEB FREELANCE (10 Clases)
5.- CURSO MEMBERSHIP SITE (14 Clases)
6.- CURSO ELEMENTOR (14 Clases)
7.- CURSO ASTRA PRO (17 Clases)
8.- CURSO BLOOM + MAILCHIMP (7 Clases)
9.- CURSO SEO (19 Clases)
10.- CURSO BLOG WORDPRESS (32 Clases)
11.- CURSO WOOCOMMERCE (39 Clases)
12.- CURSO FLATSOME WORDPRESS (36 Clases)
13.- CURSO COLORES WEB (9 Clases)
14.- CURSO ANALYTICS (10 Clases)
15.- CURSO SEO PARA TIENDAS ONLINE (12 Clases)
16.- ETC. ETC...(Más de 30 cursos)
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com