Vimeo Full Width página del home

miguelgalannunez · #1 (**permalink**) 17/09/2014, 00:53

Hola chicos,

Tengo un sitio en wordpress (www.fayermusic.com) y me gustaría que la página de inicio fuese como la página de inicio de este sitio -> www.marceloburlon.eu

Ellos utilizan un vídeo a full width responsive de Vimeo pero no se como hacerlo en mi sitio web.

Alguna idea de como podría poner un vídeo a pantalla completa en mi página de inicio y que se adaptara a todas las resoluciones de pantalla??

Lo agradezco mucho ya que he mirado y remirado en internet y no me aclaro

Muchas gracias de antemano

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.