• Sobre nosotros
  • Aviso legal
  • Contactar
Blog de diseño web y desarrollo
  • Accesibilidad
  • Usabilidad
  • Arquitectura de la información
  • Diseño web
  • SEO
  • Desarrollo web
  • Página web

El Blog de diseño web y desarrollo

Portada > YouTube responsive video

YouTube responsive video

2 años ago webreunidos Accesibilidad, CSS, Desarrollo web, Diseño web, SEO 0
Share this:

Video YouTube

En este tutorial te enseñamos a incluir en tu web un video YouTube responsive, con el fin de que se vea correctamente en monitores de escritorio, tablets y dispositivos móviles.

Cada ve más, Google tiene más en cuenta las páginas web que tienen una versión móvil correcta y por lo tanto están siendo premiadas.

Una de las complicaciones con las que un diseñador web se puede encontrar está en cómo adaptar un vídeo de YouTube para que se visualice correctamente en todos los dispositivos. En este tutorial, no vamos a crear una versión móvil sino que vamos de una manera muy sencilla a explicar cómo se puede adaptar un vídeo para que sea líquido, y por lo tanto se ajuste correctamente a cualquier tamaño.

Como todos sabemos la inclusión del vídeo pasa por utilizar una etiqueta llamada <iframe>, que si bien no es buena para la accesibilidad, es necesaria para el funcionamiento de códigos externos, lo más normal es que no tengamos acceso al control de lo que se está ejecutando dentro de ese marco, sin embargo si tenemos la oportunidad de manejar las características de iframe.responsive web para youtube

Definición de etiquetas y CSS

Aunque no es obligatorio, sí es recomendable la inclusión de la etiqueta viewport con el fin de que se vea correctamente en dispositivos Tablet y móviles.

<meta name="viewport" content="width=device-width, user-scalable=no"> <!-- opcional -->

El código CSS para este ejemplo es muy simple

<style>

#video {
	width: 100%;
	height:1%;
	min-height:380px;
	overflow:hidden;
	float:left;
    margin-bottom: 30px;
    margin-top: 7px;
}
#video iframe {
	width: 100%;
	min-height:360px;
}

</style>

Para el cuerpo de nuestro código solo nos queda tener la url del  vídeo que queremos incluir, luego cada uno maquetará a su gusto.

<body>

  <h1>YouTube responsive video: Demo</h1>
<div id="video"><iframe src="https://www.youtube.com/embed/ELDTyQj_UL4?autoplay=1" frameborder="0" allowfullscreen></iframe></div>
    <p>Tutorial desarrollado por: <a href="https://webreunidos.es" title="Diseño Web Madrid: WebReunidos" target="_self">WebReunidos</a></p>
</body>

Aquí tenéis una Demo de YouTube responsive video de cómo funciona este código tan simple.

Como siempre os dejo el código completo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no"> <!-- opcional -->
<title>Documento sin título</title>
<style>

#video {
	width: 100%;
	height:1%;
	min-height:380px;
	overflow:hidden;
	float:left;
    margin-bottom: 30px;
    margin-top: 7px;
}
#video iframe {
	width: 100%;
	min-height:360px;
}

</style>
</head>

<body>

  <h1>YouTube responsive video: Demo</h1>
<div id="video"><iframe src="https://www.youtube.com/embed/ELDTyQj_UL4?autoplay=1" frameborder="0" allowfullscreen></iframe></div>
    <p>Tutorial desarrollado por: <a href="https://webreunidos.es" title="Diseño Web Madrid: WebReunidos" target="_self">WebReunidos</a></p>
</body>
</html>

Creo que con este tutorial se ha demostrado que tener un YouTube responsive video es simple.

YouTube responsive video was last modified: agosto 30th, 2016 by webreunidos

adaptable dispositivos responsive youtube líquido youtuve responsive

Previous Post

Cómo ayuda un Community Manager a tu empresa

Next Post

MyISAM vs InnoDB

webreunidos

Desarrollo y diseño web
Posicionamiento SEO

palabras clave

Cómo elegir las palabras...

12/05/2014 0
combinar palabras clave para seo

Cómo combinar las palabras...

21/07/2014 1
SEO movil

Herramientas para SEO móvil...

04/12/2014 2

Usabilidad web: qué es...

04/03/2012 4

Cancel Reply

  • Recent
  • Popular
  • Comments
Accesibilidad web en España

Accesibilidad Web en España

02/04/2018 0
Qué tiene que tener una página web de una empresa

¿Qué tiene que tener una página web de una empresa?

21/03/2018 0
SEO negativo. Imagen

SEO negativo

17/03/2018 0
Cómo hacer una web popular

Cómo hacer una página web popular

29/01/2018 0
Formulario de validación. Imagen

Herramienta AMP de Google

23/01/2018 0
Cómo crear un sencillo buscador php web

Crear buscador php web sencillo

18/01/2016 30
calendario

Lista SELECT desde ARRAY (PHP)

12/09/2016 8

Herramientas de apoyo a la accesibilidad

14/02/2012 4

Usabilidad web: qué es y para qué

04/03/2012 4

Iniciación en el desarrollo web

27/02/2012 4

VincentSot

Muchas gracias por compartir este recurso tan…

webreunidos

Te enviaré el código completo por email,…

Lena

No me funciona, ¿podrías poner el archivo…

webreunidos

Hola Sergio, ¿que versión de PHP estás…

sergio

Hola todo este codigo va en un mismo archivo…

Tweets por @WebReunidos

Diseño web profesional

Categorías

  • Accesibilidad
  • Arquitectura de la información
  • community manager
  • CSS
  • Desarrollo web
  • Diseño web
  • plugins
  • redes sociales
  • SEO
  • SEO – SEM
  • Usabilidad
  • wordpress

Entradas recientes

  • Accesibilidad Web en España
  • ¿Qué tiene que tener una página web de una empresa?
  • SEO negativo
  • Cómo hacer una página web popular
  • Herramienta AMP de Google

Suscríbete a nuestra newsletter

Copyright (c) by WebReunidos
Desarrollo y diseño web Madrid