Tengo el siguiente código:
.left {
padding-left: 10px;
margin-left: 57px;
float: left;
position: relative;
width: 45%;
height: auto;
overflow: hidden;
}
.right {
padding-left: 10px;
margin-left: 10px;
position: relative;
float: left;
width: 45%;
height: auto;
overflow: hidden;
}
#opacity {
background: rgba(0, 0, 0, 0.72);
top:0;
bottom:0;
margin: 0;
}
<div>
<div id="opacity">
<h2> 4Coach, Entrena con nosotros!</h2>
<div class="left">
<p class="texto_c">
Las ideas que comunica un texto están contenidas en lo que se suele denominar «macroproposiciones», unidades estructurales de nivel superior o global, que otorgan coherencia al texto constituyendo su hilo central, el esqueleto estructural que cohesiona elementos lingüísticos formales de alto nivel, como los títulos y subtítulos, la secuencia de párrafos, etc. En contraste, las «microproposiciones» son los elementos coadyuvantes de la cohesión de un texto, pero a nivel más particular o local. Esta distinción fue realizada por Teun van Dijk en 1980.1
</p>
</div>
<div class="right">
<video width="800" height="600" controls class="video">
<source src="video/prueba1.mp4" type="video/mp4">
<!--PONER VARIOS FORMATOS PARA ASEGURAR LA REPRODUCCION mp4 compatible con todos los navegadores-->
Your browser does not support HTML video.
</video>
</div>
</div>
<hr style="clear: both;" />
</div>
La estructura del código necesito que se mantenga asi, soy consciente de que hay un div
que contiene los demás pero es porque después le daré un diseño a parte. El error que tengo es que solo me sale el la parte opaca en el titulo del div
, el texto y el vídeo se quedan completamente fuera, es como si el id=opacity
no los englobara.