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.
DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES
ÍNDICE INSERTAR VÍDEO YOUTUBE WORDPRESS
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 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.
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 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 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 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 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 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).
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.
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.
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.
En este vídeo insertado de YouTube hemos personalizado la imagen de cobertura, icono reproducción, borde y sombreado
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola, Joaquín, muy buen post. Gracias. Mi pregunta es si existe alguna opción o línea de código para ocultar que el vídeo es de Youtube o al menos ocultar el canal. Gracias!!!
Buenas.
Antiguamente, existían muchas opciones de personalización, pero Youtube las ido eliminando de manera progresiva. En este momento no hay prácticamente opciones de personalización de la inserción del vídeo, y menos la que comentas
Hola: Gusto en saludarte y agradecer que compartas tus conocimientos. .Gracias por tus aportes. Estoy trasteando con los códigos de inserción de vídeos en WordPress desde YouTube. Deseo que al final del vídeo incrustado ya no se reproduzcan más vídeos. ¿que código debo incluir? Gracias nuevamente y hasta muy pronto. Saludos
Hola Roberto.
Hace un tiempo, eso lo permitía hacer Youtube al incrustar vídeos. Era una opción a rellenar, y que generaba el consiguiente código de inserción. Pero, desde hace un tiempo YouTube ha eliminado todas esas opciones, y en este momento, que yo sepa, no es posible hacerlo.
Hola Joaquin.
Quiero subir u n video de vi meo en mi tema divi, pero preguntarte si sabes como desactivar los links que salen al final del video. Lo tengo subido por la url y me sale esto al final.
Gracias por tu ayuda, eres un cack!
Buenas,
Lo primero agradecerte tus palabras.
No sé a que enlaces te refieres. Mándame a joaquin@horizonweb.es una captura de pantalla y contesta a este comentario cuando me hayas enviado el email.
Un saludo
Hola Joaquin, muchas gracias por tu aporte! Quisiera saber como hacer para que no me figuren los video relacionados de youtube una vez finalizado mi video. Lo he intentado hacer de todas las maneras que tu recomiendas y no lo logro. De hecho, en youtube, cuando pongo insertar, no me aparecen las opciones de medidas del video ni la de videos relacionados. Solo «mostrar controles de reproduccion» y «mejora de privacidad». Sabes como puedo cambiarlo?
Gracias y saludos!
Hola Josefina,
Las opciones de youtube para insertar un vídeo han ido cambiando.
En este momento has de ir al vídeo y hacer los siguientes pasos:
1.- Hacer clic en «COMPARTIR»
2.- Hacer clic en «Insertar».
3.- En opciones de inserción, desmarcar: «Mostrar sugerencias de vídeos cuando finalice la reproducción».
4.- Copiar el código generado e insertarlo en tu WordPress
un saludo
hola yo he hecho todo eso pero no me aparece la opción Mostrar sugerencias de vídeos cuando finalice la reproducción”. que podría ser?
Buenas Otoniel,
Hace un par de semanas YouTube ha reducido considerablemente las opciones de inserción de vídeos. No estás haciendo nada mal, ha sido Youtube el que ha realizado un cambio en su política de inserción de vídeos
Hola Joaquin. Estoy intentando insertar un video que de ninguna de las maneras consigo que respete los tamaños que le asigno en html. He insertado otros sin problemas pero este no. En el diseño se ve completo en WP pero no en la pagina. Ni copiando la URL , ni embed. https://www.youtube.com/watch?v=DnkffcXrjTg
Hay alguna otra formnula?. Gracias
Buenas, lo cierto es que efectivamente muchas veces aunque cambies el tamaño vía html, el vídeo se muestra con las dimensiones que quiere. Yo lo que hago es utilizar el constructor de Divi para permitir o limitarle los tamaños con los contenedores. Si usas otro constructor seguramente también te podrá servir para limitarle las dimensiones
Hola, perdona pero tengo una pregunta: Si en lugar de poner un valor fijo para los valores W e H (en el ejemplo fueron W560 y H315) quisiera poner 80% y 80% en cada uno de ellos, ¿ es posible ?. De este modo creo que mantendría el responsive, ¿no?. Gracias de antemano
1.- Si trabajas con la plantilla Divi el responsive lo vas a mantener siempre, ten en cuenta que el que los elementos de una web sean responsive o no, cuando dicha web está realizada con wordpress, dependen la plantilla elegida. Es decir, si la plantilla o tema es responsive o no
2.- Creo que no es posible establecer porcentajes para el ancho y el alto
Hola que tal!
Estoy intentando poner un video enlazado desde youtube como fondo de un slider en DIVI.
El video va colocado como fondo de la sección.
Te has enfrentado a hacer algo asi? No encuentro el modo de hacerlo.
Saludos
Hola Ruben,
puedes poner un video como fondo de una sección, pero debe ser un vídeo que subas directamente a wordpress y no un vídeo subido a youtube.
A lo mejor este enlace a como poner un vídeo en la home te resuelve alguna duda
Mi problema es que tengo un video de 2.25 megas como fondo de un slider que actua como cabecera de la web. Da un poco de guerra al cargar la web en ciertas circustancias.
Es por eso que pense en alojar ese video en youtube y que se cargue desde ahi, que ademas es el proceso recomendado.
No existe ningun mecanismo css que permita hacerlo?
Buenas,
creo que no es posible lo que quieres hacer,
yo intentaría reducir el peso del vídeo para facilitar la carga
Hola,
A mi no me funciona nada de esto, el video se muestra siempre en grande, al ancho del blog.
Hola miguel,
últimamente lo que parece es que el vídeo toma el máximo espacio del contenedor disponible, por lo que mi recomendación es que uses el contructor de divi o el constructor de la plantilla que utilices para restringir el tamaño. Es decir, si usas un módulo de texto de 1/3 y ahí insertas el vídeo, pues la anchura del vídeo será de 1/3 del espacio disponible.
Hola Joaquin, gracias por responder.
Eso había pensado, utilizar Divi pero estoy haciendo las entradas directamente en el editor de wordpress porque es que el editor Divi me da muchos fallos, a veces se desconfiguran los textos e incluso me han llegado a desaparecer…en general estoy bastante decepcionado con Divi.
Me parece muy monótono y soso y visualmente no me gusta (los textos lucen apagados y nada vivos, las fuentes se ven realmente mal) aunque en otros aspectos es muy potente, claro, y depende de para que proyectos es una muy buena opción, creo que el builder es el mas potente que hay pero debe mejorar mucho aun.
También el editor de texto de Divi cuando metes texto tiene el inconveniente de que el editor no se mantiene arriba como en el editor de wordpress por defecto y ademas es muy reducido y es muy incomodo trabajar con el.
Ahora estoy usando el plugin WP Quiz de mythemeshop y también me coge para las imágenes y el media todo el ancho del contenedor, no puedo usar divi al hacer esos quiz y la verdad es que voy bastante fastidiado (no se que pensaras tu pero creo que esta gente de mythemeshop hacen muy buenos productos aunque no he comprado nada ya que me parece muy caro y encima con el sistema de suscripcion me cuesta mucho animarme…).
Bueno, pues nada, solo dejarte por aqui mi comentario, muchas gracias por la información.
Saludos
Buenas,
a mi lo cierto es que la última versión de Divi me está funcionando muy bien y no estoy teniendo problemas técnicos con la plantilla,
la empresa que mencionas no la conozco
Gracias me ayudo bastante