Tengo el siguiente código:

    

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

      .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;
        
        }

<!-- language: lang-html -->

    <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>
        
      

<!-- end snippet -->

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.