Descarga la aplicación para disfrutar aún más
Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!
Blog Estilo YouTube con HTML - Ivan Chio
Desafío México Veintitrés
Compartir
Vista previa del material en texto
Blog Estilo YouTube con HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mini Blog con Reproductor de Videos</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>Mi Mini Blog con Reproductor de Videos</h1>
<h2>Mi primer video</h2>
<div class="video-container">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0"
allowfullscreen></iframe>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
turpis eu nibh egestas convallis. Aliquam erat volutpat. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Proin suscipit
vestibulum nisl at gravida.</p>
<h2>Mi segundo video</h2>
<div class="video-container">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0"
allowfullscreen></iframe>
</div>
<p>Phasellus quis orci at justo sollicitudin tempor. Aliquam sagittis eros
vel magna hendrerit malesuada. Sed nec lacus ultrices, efficitur orci eget, sodales
justo. Nam et lacus ullamcorper, lacinia lorem id, mollis sapien. Praesent nec dolor
at nisl venenatis cursus. Morbi a luctus nibh, eu volutpat urna.</p>
</div>
</body>
</html>
Continuar navegando
Materiales relacionados
6 pag.
3 pag.tarjeta de cumpleaños HTML CSS - Ivan Chio
Desafío México Veintitrés
2 pag.Ejercicio 6 con HTML y CSS
Desafío México Veintitrés
10 pag.Practica4_ProWeb_Osvaldo_Rincon_Campos - osvaldo campos
Desafío México Veintitrés
Compartir