Santi Navarro
Menu
  • INICIO
  • WORDPRESS
  • SOCIALMEDIA
  • YOUTUBE
  • SEO
  • RECURSOS
  • CONTACTO
Home
Youtube
Insertar un video de youtube en html en un blog – TUTORIAL

Insertar un video de youtube en html en un blog – TUTORIAL

Aquí te cuento cómo insertar un vídeo de Youtube en html en tu blog o sitio web con el objetivo que puedas compartir tu contenido multimedia con los lectores de tu bitácora.

Para que puedas insertarlo en cualquiera de los mejores temas premium WordPress o en la plantilla que estés empleando actualmente.

Y es que cuando subimos nuestras producciones audiovisuales a nuestro canal lo que deseamos es que reciban visualizaciones y acciones sociales.

Pues una de las formas para facilitarlo es incrustando el vídeo en nuestro sitio web o en cualquier otro medio que permita el uso de html o a través del empleo de un shortcode agregando la propia ID del contenido.

Otro de los efectos positivos sobre el vídeo es que ayuda a su propio posicionamiento SEO en Youtube.

De igual forma también es posible insertar un vídeo de cualquier otro canal.

En propietario del canal puede, según el vídeo, optar por permitir que otros usuarios puedan incrustar el contenido o no.

Pasamos ya a ver qué hay que hacer, ¿vienes? 🙂

insertar-video-youtube-html

Contenido

  • 1 Obtener código html para insertar el video de Youtube
  • 2 Incrustar una lista de reproducción
  • 3 Como hacer el video incrustado responsive o adaptativo con html y css
  • 4 Conclusión

Obtener código html para insertar el video de Youtube

En este punto te cuento como obtener el código html necesario que nos va a permitir mostrar el contenido multimedia en nuestro blog.

Un primer paso es acceder a la página del vídeo de Youtube y seleccionar la opción Insertar.

Una vez hecho esto hay que clicar la opción de Mostrar más, abriéndose una serie de opciones como muestra la siguiente imagen.

incrustar-video-youtube

Las opciones son las siguientes:

  • Tamaño del vídeo. Elegir las dimensiones deseadas siempre pensando en el ancho del contenedor final del vídeo. Es posible elegir entre unas predefinidas o indicar unas personalizadas definiendo las dimensiones.
  • Mostrar sugerencias de vídeos. La activamos si deseamos que muestre vídeos relacionados al final de la reproducción del que hemos insertado.
  • Mostrar controles del reproductor.
  • Mostrar título y acciones. Opciones de cómo se ve.
  • Activar el modo de mejora de la privacidad. Activando este modo evitas que Youtube almacene información sobre los usuarios que visitan tu web eso sí, si no ven el vídeo.

Una vez hemos configurado las mismas ya se nos habrá generado el html iframe que debemos copiar para pegarlo en el lugar que deseemos de nuestro blog.

Ya sea una página o en el contenido de un post.

Eso sí, siempre desde la pestaña de html o código, no desde la forma visual y así nos aseguramos que se mostrará ok.

Incrustar una lista de reproducción

De igual forma es interesante si deseamos incrustar una lista de de reproducción, pongamos por ejemplo que nuestro post es el funcionamiento de una herramienta y hemos generado una lista de reproducción con una serie de vídeos que hacen referencia a la misma.

Llegado este caso también podemos insertar nuestro iframe en el contenido del post.

El proceso es similar al anterior, desde la propia lista presionamos el botón de Compartir y seleccionamos la opción de Insertar.

Seleccionamos las opciones deseadas y una vez generado nuestro iframe lo pegamos en el contenido del post o de la página.

Como hacer el video incrustado responsive o adaptativo con html y css

Cuando definimos las dimensiones a la hora de insertar un vídeo desde las opciones habitualmente pensamos en las visualizaciones a través del equipo de sobremesa.

Y se corresponden con un ancho y un alto definido en píxeles.

Pero hay que tener en cuenta la importancia del tráfico a través de dispositivos móviles.

Si te fijas una vez lo incrustas y lo visitas desde el smartphone verás que el vídeo se ve muy alargado con lo que el diseño no se ajusta.

De este modo lo mejor es proporcionar unas dimensiones al dispositivo desde donde se visualice por lo que a través de reglas CSS podemos hacer que nuestro vídeo sea responsive y se muestre adaptado al tamaño de pantalla desde donde se vaya a reproducir.

Vamos pues a ver cómo hacerlo.

En primer lugar generamos nuestro html que tiene el siguiente aspecto:

<div class="video">
<!-- Iframe copiado y pegado de Youtube -->
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ke2W9Y7TCVs?rel=0&showinfo=0" frameborder="0" allowfullscreen=""></iframe>
</div>

<div class="video"> <!-- Iframe copiado y pegado de Youtube --> <iframe width="853" height="480" src="https://www.youtube.com/embed/Ke2W9Y7TCVs?rel=0&showinfo=0" frameborder="0" allowfullscreen=""></iframe> </div>

Hemos encerrado el código del iframe en un div al que le hemos dado una clase.

Ahora mediante CSS que aplicaremos al div a través de su clase y al iframe vamos a conseguir que nuestro vídeo se muestre de forma responsive.

El código es el siguiente:

.video {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Una vez lo tengamos todo listo sólo bastará con hacer la comprobación que se ve de forma fluida.

Haciendo la ventana de nuestro navegador más pequeña veremos que se ajusta a las dimensiones del mismo.

A continuación te dejo una referencia con información adicional sobre los vídeos responsive.

Conclusión

A lo largo del post hemos visto el paso a paso para insertar vídeos de Youtube mediante el html en nuestro sitio web o blog.

Además la forma tan sencilla de ofrecer un contenido que se adapte a cualquier tipo de dispositivo siendo indiferente el tamaño de la pantalla.

Ah! Y no olvides compartir este post 😉 Gracias!

Post anterior
Siguiente post

Artículos relacionados de Youtube

Como crear un canal en Youtube para empresa o personal

Como crear un canal en Youtube para empresa o personal

Como crear un Banner de Cabecera para un canal de Youtube

Como crear un Banner de Cabecera para un canal de Youtube

Linkbuilding en Youtube: SEO con un canal, vídeos y listas

Como suscribirse a un canal de Youtube por RSS o directamente


Los datos de los comentarios están seguros.

Responsable: Santi Navarro. Finalidad: Moderar los comentarios Legitimación: Consentimiento del Interesado. Destinatarios: Tus datos los guardará Disqus, el sistema que emplea esta web, que está acogido al acuerdo de seguridad EU-US Privacy. Derechos: podrás acceder, rectificar, limitar y suprimir tus datos.

ENTRADAS RECIENTES

  • Como eliminar comentarios desde la base de datos en WordPress
  • Como crear un botón para eliminar post o página en admin bar de WordPress
  • Cómo organizar las entradas de WordPress en categorías masivamente
  • Las Mejores Plantillas WordPress para Abogados Responsive
  • Tecnicas para ganar visibilidad en redes sociales gratis
  • Los mejores navegadores de internet para Android móvil y tablet
  • Mejores Plantillas de WordPress para Inmobiliaras y Agencias de Venta y Alquiler de Propiedades
  • Mejores Plantillas de WordPress para Empresas o Web Corporativa

Santi Navarro

Diseño web Wordpress, Posicionamiento web y Socialmedia

ARTÍCULOS SOBRE HOSTING

  • Hosting para Wordpress
  • Loading Alojamiento Web
  • Hosting Gratis

PLANTILLAS PARA WORDPRESS

  • Plantillas WordPress para Fotografía
  • Plantillas WordPress para Empresas
  • Plantillas WordPress para Abogados
  • Plantillas WordPress para Inmobiliarias
  • Plantillas WordPress para Restaurantes
  • Elegant Themes Plantillas Premium
  • Themeforest Envato Market

PUBLICACIONES

  • Página web barata
  • Descargar videos de Youtube sin programas
  • Como registrarse en Twitter fácilmente
  • Mejores Plantillas Responsive para Wordpress
  • Presupuesto Tienda Online
Copyright © 2023 Santi Navarro
Diseño web Wordpress en Valencia | Diseño web Gandia
Aviso legal - Política de privacidad - Uso de cookies - Mapa del sitio