Añadir un vídeo de YouTube
Profesor: Javier López
Volver
Propuesta de la actividad
Añadir un vídeo de Youtube
Dónde pegar el código
Resultado final

Añadir un vídeo de YouTube
Es muy fácil, ya que simplemente tenemos que copiar el código HTML que Youtube nos proporciona.

Para ello:

Vamos a Youtube.com y seleccionamos el vídeo que queremos enlazar (no todos se pueden vincular externamente).
Hacemos clic con el botón de la derecha sobre el vídeo y seleccionamos la opción "Copiar código HTML insertado".
Seleccionamos el código que aparece sobre la misma ventana y lo copiamos.

Para poder probarlo localmente (en nuestro ordenador) vamos a modificar un poco el código copiado.

<iframe width="640" height="390"
src="http://www.youtube.com/embed/..
.......allowfullscreen></iframe>
Añadiendo "http:" el código nos funcionará tanto al subirlo a Internet como localmente en nuestro ordenador.


Dónde pegar el código
El código lo pegamos justo debajo del <div> de presentación que creamos en el tema anterior (Creación de varias columnas de texto).

<div id="presentacion">
  Centramos nuestros servicios profesionales en la creación de
  contenidos multimedia e interactivos ... ... ...
</div>

<article id="videos">
  <div id="video1">
    <iframe width="384" height="216" src="http://www.youtube.com/
    embed/7g8_vtLFBMw?feature=player_detailpage" frameborder="0"
    allowfullscreen></iframe>
  </div>

  <div id="video2">
    <iframe width="384" height="216" src="http://www.youtube.com/
    embed/oUVE6nSIkU8?feature=player_detailpage" frameborder="0"
    allowfullscreen></iframe>
  </div>
</article>


El primer <div> ("presentacion") es el que hemos creado en el tema anterior.


Como son dos vídeos, cada vídeo va dentro de su propio <div>. El primero llamado video1 y el segundo video2.

A su vez estos dos divs están dentro de un <article> llamado videos.

Es importante remarcar que hemos modificado el tamaño de los vídeos, cambiando sus propiedades width (a 384 píxeles) y height (a 216 px).

Sin ningún código CSS, este es .
Evidentemente, para que los vídeos se coloquen a la derecha del texto utilizaremos CSS, pero antes todavía nos queda colocar un <div> con las imágenes, que posteriormente será tapado por una animación.

Ir al siguiente tema sin actividad dedicado al