0

He intentado colocar un video de fondo en un div que posee texto (y que no es a pantalla completa) y dos botones y no puedo hacerlo El texto del div es

<div class="breadcumb-area bg-img bg-overlay" style="background-image: url(<?php echo $linka ?>img/Fondo.jpg);">
    <div class="container h-100">
        <div class="row h-100 align-items-center">
            <div class="col-12">
                <div class="breadcumb-content text-center">
                    <h2> Bienvenido <? echo utf8_encode($_SESSION['vsUsuario']);?></h2>
                    <!--Breadcumb--> 
                    <nav>
                        <ol class="breadcrumb justify-content-center">
                            <li class="breadcrumb-item"><a href=""><i class="fa fa-home" aria-hidden="true"></i>&nbsp;<? echo  utf8_encode($_SESSION['vsNombreEmpresa'])?></a></li>

                            <li class="breadcrumb-item"><a href="#"><? echo  utf8_encode($_SESSION['vsTipoEmpresa'])?></a></li>
                            <li class="breadcrumb-item active" aria-current="page"><a href="#"><? echo  utf8_encode($_SESSION['vsId'])?></a></li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div> 

La idea es que el video aparezca de fondo en vez de Background-Image, stylebackground-image: url(img/Fondo.jpg);"

2
  • Usas bootstrap 4?
    – user128299
    el 18 abr. 2020 a las 0:49
  • Si uso Bootstrap4 el 18 abr. 2020 a las 2:08

1 respuesta 1

2

No puedes usar el atributo background-image para definir un video de fondo, eso no es posible, pero lo que si puedes hacer es poner dentro una etiqueta video y usar pocisionamiento absoluto:

.contenedorVideoFondo{

    position: relative;
    width: 800px;
    height: 600px;
    min-width: 800px;
    min-height: 600px;
    z-index: 2;

}

.contenedorVideoFondo video{

    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 1;

}
<div class = "contenedorVideoFondo">

    cierto contenido html...
    <video src = "http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4" muted = "muted" autoplay loop>
    </video>

</div>

Ten en cuenta que para que un video sea reproducible automaticamente apenas se cargue, debes poner el atribuo mute en muted, ya que si no el navegador bloqueara siempre el atributo autoplay y no se reproducira nunca al comienzo.

Ahora bien, la linea:

object-fit: cover;

Hará que el video abarque lo posible del contenedor para que no queden espacios en en blanco en el contenedor, sin embargo, si deseas que se vea el video completo (ya que object-fit cover lo escala para que no se vean espacios en blanco y por siguiente no se ven algunos detalles del video), entonces deja object-fit con su propiedad contain:

object-fit: contain;
3
  • Tambien ten en cuenta que la etiqueta video no acepta links que no tengan un recurso explicito, es decir, no vayas a intentar cargar videos de youtube con la etiqueta video porque no se puede, va a fallar usando un link normal de youtube, en su lugar debes tener guardados en alguna parte de tu servidor los videos y usar esa url. cualquier cosa que no sea un recurso explicito admitido por la etiqueta video no podrá ser cargado por esta.
    – Layer
    el 18 abr. 2020 a las 4:29
  • Para saber si un recurso es explicito, puedes ir directamente a ese link, si al abrir el link hay un gran espacio en gris y ahí mismo encuentras un unico elemento que es un video que se puede reproducir, significa que el link es valido para ser usado en el reproductor, ya que se trata de un link que tiene en su header contenido tal como video/mp4 es decir, datos de video.
    – Layer
    el 18 abr. 2020 a las 4:30
  • Gracias Riven, Clarisimo...!! Muchas gracias..!!! el 18 abr. 2020 a las 5:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.