HTML - Dividir pantalla en 4

 
Vista:
sin imagen de perfil
Val: 19
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Dividir pantalla en 4

Publicado por Nicolas (10 intervenciones) el 09/10/2017 20:53:17
Hola, soy novato en html y queria saber como podria hacer para incrustar 4 videos iframe en la pantalla. Pero que se vean los 4 a la vez tomando todo el tamaño de la pantalla.

Ejemplo:
monitor-seguridad-vicom-lcd-color-de-12-4-canales-color-D_NQ_NP_4193-MLA2783062806_062012-F

He probado de muchas maneras y ninguna me funciona. Lo mas cerca que he estado es con el siguiente codigo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
 
body, html { height:100%;
	margin:0;
	padding:0;
	width:100%;
	background-color:silver;
	}
 
#uno{ border:1px solid black;
	width:49.5%;
	display:inline-block;
	margin:auto;
	height:49.5%;
	background-color:blue;
	}
#dos{ border:1px solid black;
	width:49.5%;
	display:inline-block;
	height:49.5%;
	background-color:green;
	}
#tres{ border:1px solid black;
	width:49.5%;
	display:inline-block;
	height:49.5%;
	background-color:yellow;
	}
#cuatro{ border:1px solid black;
	width:49.5%;
	display:inline-block;
	height:49.5%;
	background-color:red;
	}
</style>
</head>
<body>
	<div id="uno">1</div>
	<div id="dos">2</div>
	<br>
	<div id="tres">3</div>
	<div id="cuatro">4</div>
</body>
</html>

En él, se muestran los 4 cuadrados con sus colores, pero si le agrego el codigo del iframe de video en cada div ("uno", "dos", "tres", "cuatro") solo se muestra uno y los otros cuadrados desaparecen.

Agradezco cualquier ayuda.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 574
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Dividir pantalla en 4

Publicado por xve (1538 intervenciones) el 10/10/2017 08:12:53
Hola Nicolas, aquí te he modificado el código para que visualices los 4 videos sin problema.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE HTML>
<head>
	<meta http-equiv=Content-Type content="text/html; charset=utf-8">
	<title></title>
<style>
body, html { height:100%;
	margin:0;
	padding:0;
	width:100%;
	background-color:silver;
}
 
.recuadro {
	border:1px solid black;
	width:49.5%;
	display:inline-block;
	height:49.5%;
	overflow:hidden;
}
#uno{
	background-color:blue;
	}
#dos{
	background-color:green;
	}
#tres{
	background-color:yellow;
	}
#cuatro{
	background-color:red;
	}
</style>
</head>
<body>
	<div class='recuadro' id="uno">
		<iframe width="100%" height="100%" src="https://www.youtube.com/embed/wp2h3DxBNJ8" frameborder="0" allowfullscreen></iframe>
	</div>
	<div class='recuadro' id="dos">
		<iframe width="100%" height="100%" src="https://www.youtube.com/embed/wp2h3DxBNJ8" frameborder="0" allowfullscreen></iframe>
	</div>
	<br>
	<div class='recuadro' id="tres">
		<iframe width="100%" height="100%" src="https://www.youtube.com/embed/wp2h3DxBNJ8" frameborder="0" allowfullscreen></iframe>
	</div>
	<div class='recuadro' id="cuatro">
		<iframe width="100%" height="100%" src="https://www.youtube.com/embed/wp2h3DxBNJ8" frameborder="0" allowfullscreen></iframe>
	</div>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil
Val: 19
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Dividir pantalla en 4

Publicado por Nicolas (10 intervenciones) el 10/10/2017 17:09:00
Muchisimas gracias xve!!! Funciona perfecto, me has sacado tremendo problema! De verdad gracias! Que pases muy bien, saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 19
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Dividir pantalla en 4

Publicado por Nicolas (10 intervenciones) el 11/10/2017 20:39:43
Hola xve, perdona la molestia nuevamente, en el caso que lo quiera dividir en menos o mas pantallas, simplemente agrego mas o menos div's de clase 'recuadro'? Porque probe con solo 2 recuadros pero aparece uno arriba del otro, y no centrado.

Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 19
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Dividir pantalla en 4

Publicado por Nicolas (10 intervenciones) el 12/10/2017 01:24:09
Actualizo el mensaje:
Ya logre hacerlo con mas recuadros. El unico tema es cuando quiero solo 2, como hago para centrarlos verticalmente en la pantalla?

Ejemplo:
Imagen1

Perdona la molestia, saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 574
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Centrar verticalmente con flex

Publicado por xve (1538 intervenciones) el 12/10/2017 08:38:01
Nicolas, añade el estilo body:

1
2
3
4
5
body {
    display: flex;
    justify-content: center;
    align-items: center;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 19
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Centrar verticalmente con flex

Publicado por Nicolas (10 intervenciones) el 13/10/2017 23:41:56
Espectacular, me has sido de mucha ayuda xve, y perdón nuevamente por la insistencia.

Que pases bien, saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de rick 1956
Val: 75
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Dividir pantalla en 4

Publicado por rick 1956 usalatu@outlook.com (42 intervenciones) el 19/11/2017 03:34:48
elimina los recuadros #tres, #cuatro, y los div pertinentes, y aumenta el height de los dos restantes al 99%,. saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Dividir pantalla en 4

Publicado por Antonio a_ojeda_a@outlook.com (1 intervención) el 20/10/2018 01:01:54
Excelente aporte, también a mi me ha servido. Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Dividir pantalla en 4

Publicado por Carlos Octavio (1 intervención) el 18/04/2019 05:12:04
Buenas, disculpa quiero hacer lo mismo nada que con vídeos que tenga guardados y no de Youtube, si me dan una recomendación por favor, porque con los videos guardados se reproduce en pantalla completa
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar