YouTube se ha convertido en una videoteca universal existen videos de prácticamente todas las áreas del conocimiento humano, hoy en día sea ha convertido en una referencia casi obligatoria para el diseño web.
Para integrar videos en YouTube a nuestra pagina hay varias formas, mediante la etiqueta <object>, la etiqueta <embed> (ambas en desuso) y mediante una etiqueta <iframe>.
Lo primero que tenemos que identificar es el identificador unico del video en youtube, ¿como se hace?, muy fácil, busca el video en youtube y fijate en la dirección que esta en el navegador que debe ser algo asi :
https://www.youtube.com/watch?v=A3PDXmYoF5U
¿Cual es el identificador? pues es este:
https://www.youtube.com/watch?v=A3PDXmYoF5U
Una vez que lo tienes escribes el siguiente código :
<!DOCTYPE html>
<html>
<body>
<iframe width="640" height="400"
src="https://www.youtube.com/embed/A3PDXmYoF5U">
</iframe>
</body>
</html>
Y ya has integrado un video en YouTube con tu pagina.
Como lo personalizamos
Opción Autoplay (Para que comience automaticamente):
autoplay =0 lo desactiva y autoplay =1 lo activa.
<iframe width="640" height="400"
src=https://www.youtube.com/embed/A3PDXmYoF5U?autoplay=1”>
Opción Loop (para que se repita):
loop=0 lo desactiva y loop=1 lo activa
<iframe width="640" height="400"
src=https://www.youtube.com/embed/A3PDXmYoF5U?loop=1”>
Opción Controls (Usar o no los controles de YouTube):
controls=0 lo desactiva y controls=1 lo activa
<iframe width="640" height="400"
src=https://www.youtube.com/embed/A3PDXmYoF5U?controls=1”>
Mejoremos un poco nuestro ejemplo:
<!DOCTYPE html>
<html>
<head>
<title> YOUTUBE </title>
<style>
body {
background-color:black;
color : white;
}
iframe {
border:solid 3px;
}
table {
width:100%
}
td {
padding:20px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<h1>GoPro Hero 3</h1>
<h2>Action Camera</h2>
</td>
<td>
<iframe width="640" height="400" src="https://www.youtube.com/embed/A3PDXmYoF5U?autoplay=1"></iframe>
</td>
</tr>
</table>
</body>
</html>
No hay comentarios.:
Publicar un comentario