Cómo hacer para que los videos puestos en blogger se adapten al ancho de mi blog?

Guillermo Castillo · 14 Feb 2016

Hola amigos. Quiero que mis videos de youTube se adapten al ancho de mi plantilla así mismo en versión móvil.
Alguien sabe de algún código.

Encontré aquí mismo el siguiente código HTMl. Con esto hace todos los videos insertados en tu blog del tamaño que quieras(el dato fue publicado por Kanikase)

<script type="text/javascript">
//<![CDATA[
var width = 600;
var height = 460;
(function(a,b) {
var iframes = document.getElementsByTagName('iframe');
for(var i = 0; i < iframes.length; i++) {
if(iframes.src.indexOf('youtube.com/embed/') > -1) {
iframes.width = a;
iframes.height = b;
}
}
})(width, height);
//]]>
</script>

El problema es que en versión móvil no se adapta a la pantalla queda al tamaño del PC.

Si alguien sabe que se le necesita agregar para que se adapte a cualquier resolución se los agradeceré mucho saludos.

lucho1592 · 14 Feb 2016

Prueba entrar a Ciudad Blogger

AlexxxBcN · 14 Feb 2016

Con % 100%...

JulioRC · 14 Feb 2016

Hola amigo, es muy sencillo en lugar de width= 600; ponle width= 100%; y se ajustará perfectamente al ancho de tu blog:encouragement:

JesusEC · 14 Feb 2016

JulioRC dijo:
Hola amigo, es muy sencillo en lugar de width= 600; ponle width= 100%; y se ajustará perfectamente al ancho de tu blog:encouragement:

También aplica para responsive?

Guillermo Castillo · 14 Feb 2016

JulioRC dijo:
Hola amigo, es muy sencillo en lugar de width= 600; ponle width= 100%; y se ajustará perfectamente al ancho de tu blog:encouragement:

No funciona, no hace ningún cambio al agregar 100%. Ya no se que más hacer, ya que este código hace todos los post de video al mismo tamaño sin necesidad de ir uno por uno.

- - - Actualizado - - -

JesusEC dijo:
También aplica para responsive?

a eso me refiero que no se ve bien para versión móvil se ve al tamaño del PC. Sólo falta que se adapte a móvil para que quede perfecto.

Manu Hernandez · 14 Feb 2016

Prueba metiendo lo en un div con un íd. Luego a ese id. Le das propiedades con css.

#Mi-id{max-width:100%}

Enviado desde mi 6045I mediante Tapatalk

- - - Actualizado - - -

0506memocastillo dijo:
No funciona, no hace ningún cambio al agregar 100%. Ya no se que más hacer, ya que este código hace todos los post de video al mismo tamaño sin necesidad de ir uno por uno.

- - - Actualizado - - -

a eso me refiero que no se ve bien para versión móvil se ve al tamaño del PC. Sólo falta que se adapte a móvil para que quede perfecto.

si no te sirve te dejo estos 2 tutoriales muy buenos, si los sigues correctamente lograras lo deseado.

VÃdeos adaptables (RWD) automÃ¡ticos | Oloblogger

ImÃ¡genes, tablas y vÃdeos adaptables para eso del responsive | Oloblogger

Guillermo Castillo · 14 Feb 2016

Manu Hernandez dijo:
Prueba metiendo lo en un div con un íd. Luego a ese id. Le das propiedades con css.

#Mi-id{max-width:100%}

Enviado desde mi 6045I mediante Tapatalk

- - - Actualizado - - -

si no te sirve te dejo estos 2 tutoriales muy buenos, si los sigues correctamente lograras lo deseado.

VÃ*deos adaptables (RWD) automÃ¡ticos | Oloblogger

ImÃ¡genes, tablas y vÃ*deos adaptables para eso del responsive | Oloblogger

Gracias por contestar. Como tengo que implementar, puedes poner el código como tendria que quedar.

Vi los post que me recomendaste se logra bien, pero en PC se ven demasiado grandes.

Manu Hernandez · 14 Feb 2016

0506memocastillo dijo:
Gracias por contestar. Como tengo que implementar, puedes poner el código como tendria que quedar.

Vi los post que me recomendaste se logra bien, pero en PC se ven demasiado grandes.

<div id"videos">
Code del video
</div>

Css:

#videos{max-width:100%;}

JulioRC · 14 Feb 2016

0506memocastillo dijo:
No funciona, no hace ningún cambio al agregar 100%. Ya no se que más hacer, ya que este código hace todos los post de video al mismo tamaño sin necesidad de ir uno por uno.

- - - Actualizado - - -

a eso me refiero que no se ve bien para versión móvil se ve al tamaño del PC. Sólo falta que se adapte a móvil para que quede perfecto.

Tendrías que hacerlo manualmente para cada post, pues a mi si me ha funcionado perfectamente.

- - - Actualizado - - -

0506memocastillo dijo:
Gracias por contestar. Como tengo que implementar, puedes poner el código como tendria que quedar.

Vi los post que me recomendaste se logra bien, pero en PC se ven demasiado grandes.

Tendrías que reducir el ancho de tu plantilla para que se vea bien, en caso de eso, al width le podrías poner un 80%, 70%, hasta que lo veas a tu gusto

- - - Actualizado - - -

JesusEC dijo:
También aplica para responsive?

La verdad si amigo, lo he comprado creando mis propias platillas responsive

Guillermo Castillo · 15 Feb 2016

Manu Hernandez dijo:
<div id"videos">
Code del video
</div>

Css:

#videos{max-width:100%;}

gracias si se implementa. Use tu código pero en versión móvil se ve muy grande no se adapta. Igual gracias por la ayuda.

Jano7z · 28 Feb 2016

donde dice with: 600xp lo quitas y lo dejas asi with: 100%

Okaro · 29 Feb 2016

Este es el código que uso yo en varias webs y funciona de miedo con iframes, y se ve bien en móviles:

HTML:

/* Video-Wrapper */
#player-embed {
     position: relative !important;
     padding-bottom: 53.27% !important; /* 16:9 */
     padding-top: 27px !important;
     height: auto !important;
}
#player-embed iframe { 
     position: absolute;
     top: 0px !important;
     left: 0px !important;
     width: 100% !important;
     height: 100% !important;
}

El iframe del vídeo lo colocas dentro de un DIV con ID #player-embed, y listo.

Ejemplo: Tsugi no Season | AKB48 | DONKI 8F

Un Saludo.

Cómo hacer para que los videos puestos en blogger se adapten al ancho de mi blog?

Guillermo Castillo

lucho1592

AlexxxBcN

JulioRC

JesusEC

Guillermo Castillo

Manu Hernandez

Guillermo Castillo

Manu Hernandez

JulioRC

Guillermo Castillo

Jano7z

Okaro

Temas similares