Incluir videos de vimeo o YouTube en tu página web es de lo más sencillo, ya verás. 😀

Cómo incluir un vídeo de Vimeo en tu página web

1Ve al enlace del vídeo de Vimeo que quieres introducir en tu página web.
Como ejemplo yo he elegido el siguiente: http://vimeo.com/39645824

2

Haz clic en el botón “share” que está justo en la parte superior derecha del vídeo.
insertar vídeo de vimeo en tu página web

3

Se abrirá una pantalla en la que te ofrecen directamente el código que debes pegar en tu archivo.html.
insertar vídeo de vimeo en tu página web

4

Si haces clic en en enlace bajo el vídeo “Opciones de incrustación personalizable” se te ofrecerán algunos parámetros para personalizar tu vídeo. Una vez estés de acuerdo con tus opciones, copia y pega el código que asignan al vídeo dentro tu página.

¡Listo! Ya puedes visualizar el vídeo desde tu página. 😀

Cómo incluir un vídeo de YouTube en tu página web

1

Ve al enlace del vídeo en YouTube que quieres introducir en tú página web.
Como ejemplo podemos ir a esta: http://www.youtube.com/watch?v=KXdUNp_9oHs

2

Haz clic en el botón “Compartir” que está justo debajo del vídeo como te muestro en la imagen.
insertar un vídeo de youtube en tu página web

3

Se abrirá una pantalla y dentro de ella verás un botón que dice: “Insertar”. Haz click ahí. Volverá a ampliarse la ventana como la siguiente.
insertar vídeo de youtube en tu página web
Fíjate cuántas opciones tienes antes de copiar el texto y pegarlo en tu archivo.html. Una vez listo e introducido el tamaño de tu vídeo (puedes modificarlo perfectamente más tarde desde el html) solo tienes que copiar y pegar el código en la página.

4

¡Ya puedes visualizar el vídeo desde tu página!

 

Desde este vínculo puedes comprobar como va quedando la maquetación de nuestra página después de lo aprendido en este blog.
Y como siempre, también puedes descargarlo e ir haciendo tus prácticas con el código. ¡Suerte! 😀

¡Gracias por leerme y hasta el próximo blog!


  1. pasar de PSD a HTML y CSS | definiendo los pasos
  2. pasar de PSD a HTML y CSS | recorte y optimización de imágenes para web
  3. pasar de PSD a HTML y CSS | maquetando una web desde cero
  4. pasar de PSD a HTML y CSS | maquetar un menu
  5. pasar de PSD a HTML y CSS | introducir un vídeo de vimeo o youtube
  6. pasar de PSD a HTML y CSS | crear varias columnas en html y css
  7. pasar de PSD a HTML y CSS | maquetar el pie de página

 

Una Respuesta

  1. Jefrey

    He subido mi página, la realicé en psd y la subí por dreamweaver cs6.
    Ésta página se ve en el ordenador correctamente, pero no se reproducen los videos en dispositivos móviles.
    He usado la etiqueta con sus codecs y también la he direcciona do a un video de YouTube pero no se ve.
    Ayuda por favor.!

    Responder

Hacer Comentario

Su dirección de correo electrónico no será publicada.