miércoles, 7 de noviembre de 2018

Insertar un vídeo y ajustar el tamaño


Hola, chicos, aquí tenéis el vídeo de la Olimpiada de Otoño que celebramos en Erain el pasado 5 de octubre. Espero que disfrutéis viéndolo tanto como yo disfruté haciéndolo:


Lo de arriba es un ejemplo de la tarea que tienes que hacer hoy: escribir un breve texto de presentación e insertar un vídeo que te guste, ajustando el tamaño para que no se salga de los bordes. 

Sigue estos pasos:

1.- Elige el vídeo. Busca uno en YouTube que ya conozcas y que te guste. Puede ser un vídeo musical, deportivo, científico,... lo que prefieras, pero procura que no resulte ofensivo para nadie (que no se digan palabrotas, que no se maltrate a personas ni a animales, que no aparezcan desnudos y que no sea un rollo infumable e interminable).

2.- Clica debajo del vídeo, donde pone "compartir":


3.- En la ventana que se abre ignora el enlace y el botón copiar, tienes que clicar en insertar:

4.- En esta nueva ventana, selecciona y copia todo el texto html:



5.- Vuelve a la entrada que estés preparando en tu blog y pega el código en la pestaña HTML.

Y en principio ya está. Ahora hay que comprobar que ha quedado bien. Volviendo a la pestaña "Redactar" puedes comprobar qué aspecto tendrá el video insertado. Si no está bien alineado, es mejor centrarlo. Pero no podrás comprobar si el tamaño es el adecuado hasta que publiques la entrada o le des a "Vista previa". Si es demasiado grande, tendrás que modificar el tamaño en el código HTML:

6.- Busca dónde está el tamaño del vídeo. Aquí lo tienes destacado en rojo:

<iframe width="560" height="315" src="https://www.youtube.com/embed/BboYt5WorL0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

7.- Sustituye la anchura (width) y la altura (height) por valores algo más pequeños pero manteniendo las proporciones. Prueba multiplicando ambos tamaños por 0,9:

560 x 0,9 = 504       315 x 0,9 = 220,5 (sin decimales, 221)

Si te sirve de orientación, en este blog utilizo las proporciones 520x292 (520 píxeles de anchura y 292 de altura). En otro blog con un diseño más estrecho utilizo 420x236.

¡Ánimo!

1 comentario:

  1. Muchas gracias por compartir esta información, me sirvió mucho para mi sitio web!

    ResponderEliminar