5. Pasar de PSD a HTML y CSS | Introducir un vídeo de Vimeo o YouTube

[et_pb_section admin_label=»section»] [et_pb_row admin_label=»row»] [et_pb_column type=»4_4″][et_pb_text admin_label=»Text»]

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

Ve 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

Haz clic en el botón «share» que está justo en la parte superior derecha del vídeo.

Se abrirá una pantalla en la que te ofrecen directamente el código que debes pegar en tu archivo.html.

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.

<iframe src="http://player.vimeo.com/video/39645824?byline=0&amp;portrait=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>

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

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

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

Haz clic en el botón «Compartir» que está justo debajo del vídeo como te muestro en la imagen.

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.

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.

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

<iframe width="420" height="315" src="http://www.youtube.com/embed/KXdUNp_9oHs" frameborder="0" allowfullscreen>

</iframe>

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

[/et_pb_text][/et_pb_column] [/et_pb_row] [/et_pb_section]