Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Diseñoadaptable con videos de youtube

Estas en el tema de Diseñoadaptable con videos de youtube en el foro de CSS en Foros del Web. Buenas, Quiero insertar un video de youtube en mi página. El código de dicho video indica en píxeles el ancho y alto (560x315). Quiero cambiar ...
  #1 (permalink)  
Antiguo 05/05/2014, 14:47
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 10 meses
Puntos: 4
Diseñoadaptable con videos de youtube

Buenas,
Quiero insertar un video de youtube en mi página.
El código de dicho video indica en píxeles el ancho y alto (560x315). Quiero cambiar los píxeles por porcentages.
El ancho de la web es 1024, por lo que calcular el porcentage de ancho no lleva problema (54,7%), pero no sé la manera de calcular el alto. He intentado poner height:auto, pero no funciona.
Alguna idea. Gracias
__________________
Qué fácil cuando lo sabes y qué difícil cuando no
  #2 (permalink)  
Antiguo 06/05/2014, 05:42
 
Fecha de Ingreso: julio-2010
Ubicación: A Coruña
Mensajes: 505
Antigüedad: 14 años, 3 meses
Puntos: 60
Respuesta: Diseñoadaptable con videos de youtube

Como odiais google... de verdad...

"videos youtube responsive"

Y salen tutoriales por tooooodas partes... ¬¬
__________________
http://zeromm.es/
Diseñador Web | Experto en Responsive Design, CSS3 y Optimización Web.
  #3 (permalink)  
Antiguo 06/05/2014, 10:12
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 10 meses
Puntos: 4
Respuesta: Diseñoadaptable con videos de youtube

Gracias Zeromm por tu respuesta. Te equivocas si piensas que no busco antes de preguntar, pero cuando dominas un tema es más fácil buscar por los términos correctos y, en consecuencia, encontrar lo que buscas. La verdad es que buscando como dices, he encontrado la solución.
La pongo aquí por si a alguien le interesa:

Código HTML:
Ver original
  1. <section id="contenedor">
  2.     <div class="videoResponsive">
  3.     <iframe src="http://www.youtube.com/embed/7MlHOTh_m00"></iframe>
  4.     </div>

Código CSS:
Ver original
  1. #contenedor{
  2.     max-width:800px;/* Recuerden aplicar el ancho máximo del contenedor*/
  3.     margin:0 auto;
  4. }
  5. .videoResponsive{
  6.     margin:0 auto;
  7.     height:0px;
  8.     width:100%; /*tomará el tamaño al 100% del #contenedor*/
  9.     padding-top:56.25%; /*nos ayudara a la proporción del video*/
  10.     position:relative;
  11. }
  12. .videoResponsive iframe{
  13.     position:absolute;
  14.     height:100%;
  15.     width:100%;
  16.     top:0px;
  17.     left:0px;
  18. }
__________________
Qué fácil cuando lo sabes y qué difícil cuando no

Etiquetas: página, videos, youtube
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:47.