add

¿Cómo hacer que los videos de YouTube se hagan totalmente Responsive en mi blog de Blogger?


¿Qué hago para que los videos se YouTube se puedan ver correctamente cuando se ingresa a mi blog de Blogger desde las tabletas y los teléfonos? ¿Cuándo un usuario ingrese a mi blog de Blogger desde un teléfono inteligente o un Tablet le muestre correctamente el video de YouTube optimizado? Para tener este truco de Blogger deberá seguir todas las instrucciones de este tutorial de Blogger. Debemos insertar un código en la plantilla de Blogger desde el Editor HTML, luego vamos a ingresar unas líneas de código junto con el código Embed el cual lleva el video, esto hará que el video de Youtube que usted publicó en su entrada de Blogger se haga totalmente Responsive y se visualice correctamente en un teléfono inteligente o en una Tableta.

¿Cómo hacer que los vídeos de YouTube se hagan totalmente Responsive en mi blog de Blogger?

Este es un Ejemplo de la optimización de un video de Youtube en una entrada de Blogger

Pude ver su demostración en el siguiente blog, disminuya su navegador o abra el demo desde su SmartPhone


DEMO

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Plantilla

¿Cómo hacer que los vídeos de YouTube se hagan totalmente Responsive en mi blog de Blogger?

3 Un clic en “Editar HTML

¿Cómo hacer que los vídeos de YouTube se hagan totalmente Responsive en mi blog de Blogger?

Ahora se le abrirá el Editor HTML de su plantilla

¿Cómo hacer que los vídeos de YouTube se hagan totalmente Responsive en mi blog de Blogger?

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

¿Cómo hacer que los vídeos de YouTube se hagan totalmente Responsive en mi blog de Blogger?

4 Busque este código

]]></b:skin>

Ingrese las siguientes líneas de código CSS justo arriba del código que encontró

/*-----Estilos CSS Smartphones y Tabletas Video de Youtube ----------*/
.video-container {
                position:relative;
                padding-bottom:56.25%;
                padding-top:30px;
                height:0;
                overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
}
/*-----Fin de Estilos CSS Smartphones y Tabletas Video de Youtube ----------*/


¿Cómo hacer que los vídeos de YouTube se hagan totalmente Responsive en mi blog de Blogger?

5 Un clic en “Guardar plantilla

¿Cómo hacer que los vídeos de YouTube se hagan totalmente Responsive en mi blog de Blogger?

6 Ahora diríjase a la Entrada, la cual tiene el Video de Youtube

¿Cómo hacer que los vídeos de YouTube se hagan totalmente Responsive en mi blog de Blogger?

7 Habilite la casilla “HTML” de su Entrada

¿Cómo hacer que los vídeos de YouTube se hagan totalmente Responsive en mi blog de Blogger?

Ingrese el siguiente código

<div class="video-container">Ingrese aquí el código Embed de Youtube</div>


Remplace donde dice Ingrese aquí el código Embed de Youtube por el código de inserción del video de Youtube

¿Cómo hacer que los vídeos de YouTube se hagan totalmente Responsive en mi blog de Blogger?

Por ejemplo le quedara de la siguiente manera:

<div class="video-container"><iframe width="600" height="380" src="https://www.youtube.com/embed/Q0VGRlEJewA" frameborder="0" allowfullscreen></iframe></div>


Publique o actualice su Entrada

¿Cómo hacer que los vídeos de YouTube se hagan totalmente Responsive en mi blog de Blogger?

8 Eso es todo, ahora puede abrir su blog de Blogger desde un Teléfono y mirar la entrada, el video de Youtube se mostrara optimizado.

Nota: recuerde, si usted tiene algunos videos de Youtube insertados en varias entradas de su blog de Blogger, tendrá que repetir el proceso desde el paso 7.

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir

Preguntas frecuentes:


6 comentarios:

  1. en el cogido de inserción en los valores que me aparecen les pongo 360 x 360 y se ven bien

    ResponderEliminar
    Respuestas
    1. Hola Paula, no entiendo a su pregunta, usted puede poner cualquier valor que se ajuste al tamaño de su entrada y se muestre correctamente desde un ordenador, pero al ingresar desde un teléfono este cambiara automáticamente a un tamaño reducido gracias a los estilos CSS . Saludos.

      Eliminar
  2. Hola agregue a mi pagina pero no funciona, tendrás un correo para enviarte los datos de mi web. Saludos. Desde ya muchas gracias.

    ResponderEliminar
  3. Hola buenos dias, me preguntaba si ese modelo se adapta a cualquier tipo de pantalla?

    ResponderEliminar
  4. ingrese el codigo tal como se dice en el tutorial pero al publicar no me sale el video el espacio se queda en blanco

    ResponderEliminar
    Respuestas
    1. Hola, por favor cual es la dirección URL de la entrada en a cual usted inserto este truco de Blogger, y así le podre guiar en su configuración

      Saludos

      Eliminar

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios