Estoy usando Bootstrap y se preguntaba si podría incrustar un vídeo como fondo, pero llenando toda la pantalla, de la misma manera que harías con una imagen, centrándolo al cambiar de tamaño, pero siempre a pantalla completa.

Me expreso muy mal por lo que me he preparado este para que usted vea lo que quiero conseguir.

Ahora, estoy tratando de hacer lo mismo con un de video incorporado, pero no sé cómo hacerlo.

HTML

<!-- Latest compiled and minified CSS -->
<link  href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container-fluid">
<div class="embed-responsive embed-responsive-16by9">
    <div id="background">
       <iframe id='player' width="2500" height="1406" src="https://www.youtube.com/embed/Rk6_hdRtJOE?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;loop=1&amp;playlist=Rk6_hdRtJOE&amp;enablejsapi=1&version=3" frameborder="0"></iframe>
    </div>
</div>          
</div>

CSS

#background {
    position: absolute;
    top:0;
    left:0;
    z-index: -999;
    width: 100%;
    height: 100%;
}

ACTUALIZACIÓN

Me gustaría conseguir algo como este. Cuando el tamaño de la ventana, el video está adaptado para llenar la pantalla, no importa de forma horizontal sólo aparece una parte del vídeo. Que se ha hecho con el ‘vídeo’ etiqueta, estoy usando el ‘iframe’ uno.

InformationsquelleAutor Fernando | 2015-05-06

2 Comentarios

  1. 1

    Me las arreglé para hacerlo gracias a tubular.

    Sólo tiene que añadir en su cuerpo de una etiqueta div con el id «contenedor» y llame a su función en js:

    HTML

    <div id="wrapper"></div>
    

    JS

    $().ready(function() {
      $('#wrapper').tubular({videoId: 'idOfYourVideo'}); //where idOfYourVideo is the YouTube ID.
    });
    
  2. 0

    prueba de esta forma.

    HTML

    <link  href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <div class="container-fluid">
        <div class="embed-responsive embed-responsive-16by9">
            <div id="background">
               <iframe id='player' width="100%" height="100%" src="https://www.youtube.com/embed/Rk6_hdRtJOE?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;loop=1&amp;playlist=Rk6_hdRtJOE&amp;enablejsapi=1&version=3" frameborder="0"></iframe>
            </div>
        </div>          
    </div>
    

    CSS

    html, body{ height: 100%; margin: 0; padding: 0;}
    #background {
        position: absolute;
        top:0;
        left:0;
        z-index: -999;
        width: 100%;
        height: 100%;
    }
    .container-fluid{margin: 0; padding: 0; height: 100%;}
    .embed-responsive{height: 100%;}
    
    • Es completamente el mismo. Pruébalo en jsfiddle, copie el código y verás. Gracias por el intento, sin embargo.
    • lo que yo quiero es que cuando se cambia de tamaño, como el número de píxeles del vídeo y la ventana no tiene que ser el mismo, el video debe ser mostrada parcialmente en su ancho, pero siempre el 100% de la altura.
    • Genial este Tubular! El ejemplo que he publicado no era el mismo jsfiddle.net/m86kndsx este es el jsfiddle.net/0e89mjLp Hay un problema porque de la barra negra en la parte superior y la parte inferior debido a la resolución del vídeo. Pero ahora entiendo que quería, el contenido de vídeo con altura de 100%.
    • …en realidad, el contenido de video a pantalla completa

Dejar respuesta

Please enter your comment!
Please enter your name here