Vídeos

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