Foros del Web - Ver Mensaje Individual

AlejandroGalvez · #2 (**permalink**) 17/09/2014, 02:34

El vídeo parece ser incrustado a través de Revolution Slider por lo que deberías recurrir a ellos, los creadores del plugin, para mayor información sobre esto. El JavaScript que interviene en el proceso de crear y controlar un slider genera bastante CSS en línea que sobrescribirá mucho de tu estilo propio.

También ten en cuenta que un vídeo puede ocupar el 100% del alto y el 100% de ancho. Pero eso no quiere decir que cada píxel del navegador mostrará un fragmento del vídeo pues el reproductor añadirá franjas negras para compensar la resolución y no deformar así el contenido. Es tu caso, el vídeo está ocupando el 100% del ancho pero mostrando franjas laterales negras. También ocupa el 100% del alto y no agrega franjas negras superiores e inferiores PORQUE ya las incluye el vídeo en si mismo.

Independientemente de lo anterior te diré que el iframe de Vimeo está metido dentro de varios contenedores, diría que más de una docena entre elementos de lista, la lista en si misma y un montón de divs. Esa estructura tan sobrecargada y compleja es la que te va a estorbar pues muchas de esas capas tienen estilo propio con tamaños y márgenes específicos. Mira tu estructura hasta llegar al iframe del vídeo:

Código HTML:

Ver original<body>
    <div id="wrapper" class="container">    
        <div class="wrap maincontent " role="document">
            <div id="content" class="container">
                <div class="row no-vc">
                    <div class="main col-md-12" role="main">
                        <div  class="wpb_row vc_row-fluid vc_custom_1410940790803">
                            <div class="vc_container">
                                <div class="vc_span12 wpb_column column_container">
                                    <div class="wpb_wrapper">
                                        <div class="wpb_revslider_element wpb_content_element"><!-- START REVOLUTION SLIDER 4.6.0 fullscreen mode -->
                                            <div id="rev_slider_2_1_wrapper" class="rev_slider_wrapper fullscreen-container">
                                                <div id="rev_slider_2_1" class="rev_slider fullscreenbanner">
                                                    <ul>    <!-- SLIDE  -->
                                                        <li>
                                                            <div class="tp-caption customin fullscreenvideo tp-videolayer start">
                                                                <iframe>ESTE ES TU VÍDEO</iframe>
                                                            </div>
                                                        </li>           
                                                    </ul>
                                                </div>
                                            </div><!-- END REVOLUTION SLIDER -->
                                        </div>
                                    </div> 
                                </div> 
                            </div>
                        </div>
                    </div>            
                </div><!-- row-->
            </div><!-- content --> 
        </div>
    </div>
</body>

Deberías solucionar eso o tirar de posiciones absolutas y quizás algo de ayuda de javascript para ocultar esas franjas laterales negras y hacerlo todo responsivo. El truco sería hacer el vídeo más alto y ancho, haciendo que sobresalga del viewport y reposicionándolo a base de márgenes por CSS. Ya es cuestión tuya calentarte la cabeza con CSS o JS. Es una posible solución que ahora mismo me venga a la cabeza. También creo recordar que hay plugins destinados a hacer exactamente lo que quieres, quizás deberías echarle un ojo ya sea para utilizarlos o emularlos.

Suerte.