3

Necesito que el video me ocupe todo el espacio de la pantalla, pero la misma se queda en el medio:

introducir la descripción de la imagen aquí

El código que tengo para darle formato es el siguiente:

.firstPage {
  height: 100vh;
  min-width: 100%;
}

.container-hero-video,
#myVideo {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -100;
  min-width: 100vw;
  max-height: 100vh;
}
    <!DOCTYPE html>
  <html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta charset="UTF-8">
      <title>Velebit Travel Gallery || Inicio</title>
      <link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css">
      <link rel="stylesheet" href="css/main.css">
      <link rel="stylesheet" href="css/iconos/velebit-embedded.css">
      <link rel="stylesheet" href="css/iconos/velebit.css">
      <link rel="stylesheet" href="css/animate.css">
      <link rel="icon" href="media/favicon.ico" type="image/x-icon">
      <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
      <link rel="stylesheet" type="text/css" href="pagePiling/jquery.pagepiling.css" />
      <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap" rel="stylesheet">

    </head>
    <body>

        <div id="pagepiling">
          <div class="section firstPage">
            <nav id="menu" class="navbar navbar-expand-lg navbar-light bg-light position-fixed">
              <a class="navbar-brand" href="#"><img src="media/logo_distintivo.png" width="35" height="45" class="d-inline-block align-top" alt=""></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link menu-link" href="index.html"><span class="icon-inicio">Inicio</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link menu-link" href="servicios.html"><span class="icon-ofertas"></span>
                    Servicios
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link menu-link" href="contacto.html" tabindex="-1" aria-disabled="true"><span class="icon-contactanos"></span> Contáctenos</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle menu-link" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="icon-blog">Blog</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      <a class="dropdown-item" href="/blog/">Posts</a>
                      <a class="dropdown-item" href="submit.html">Panel de Control</a>
                    </div>
                </li>
              </ul>
              </div>
          </nav>
          <div class="container-hero-video">
            <video autoplay muted loop id="myVideo">
              <source src="https://i.imgur.com/B4hlGgb.mp4" type="video/mp4">
            </video>
              <div class="container-hero-text"><div class="d-flex justify-content-center"><img src="media/logo_distintivo.png" height="200px"alt="" class="hero-video-img"></div>
                <p class="hero-video text-center"><span class="hero-video-title">Velebit Travel Gallery</span> <br>
                  Viaja con una sonrisa, viaja con nosotros
              </p></div>
              <div class="d-flex justify-content-center container-social-button"><section>
                <ul id="services">
                  <li>
                    <div class="facebook">
                      <a href="https://web.facebook.com/Velebittravel/?_rdc=1&_rdr">
                        <i class="icon-facebook" aria-hidden="true"></i>
                      </a>
                    </div>
                  </li>
                  <li>
                    <div class="instagram">
                      <a href="https://www.instagram.com/velebittravel/?hl=es-la">
                        <i class="icon-instagram" aria-hidden="true"></i>
                      </a>
                    </div>
                  </li>
                  <li>
                    <div class="whatsapp">
                      <a href="https://api.whatsapp.com/send?phone=18098017151&text=&source=&data=&app_absent=">
                        <i class="icon-whatsapp" aria-hidden="true"></i>
                      </a>
                    </div>
                  </li>
                </ul>
                </section>

              </div>
              <div class="arrow">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
          </div>

          <div class="section secondPage">
            <img src="media/slider-1.jpg" alt="" class="hero-image">

            <div class="arrow">
              <span></span>
              <span></span>
              <span></span>
            </div>
          <div class="section thirdPage">
            <div class="card-deck card-inicio">
            <div class="card">
              <img src="media/suitcase.png" class="card-img-top card-img" alt="...">
              <div class="card-body">
                <h5 class="card-title titulo-inicio">Descubre una infinidad de destinos</h5>
                <p class="card-text">Hemos revisado los mejores atractivos turísticos en todo el planeta, sólo para que disfrutes de experiencias únicas.</p>
              </div>
              <div class="card-footer">
                <a href="https://www.facebook.com/Velebittravel/"><button type="button" class="btn btn-outline-success">Últimas Ofertas</button></a>
              </div>
            </div>
            <div class="card">
              <img src="media/passport.png" class="card-img-top card-img" alt="...">
              <div class="card-body">
                <h5 class="card-title titulo-inicio">El mundo está a la palma de tu mano</h5>
                <p class="card-text">Puedes reservar ahora mismo tus vacaciones de ensueño, con tan sólo dar click estarás rumbo al paraíso.</p>
              </div>
              <div class="card-footer">
                <a href="servicios.html"><button type="button" class="btn btn-outline-success">Reservar ahora</button></a>
              </div>
            </div>
            <div class="card">
              <img src="media/avion.png" class="card-img-top card-img" alt="...">
              <div class="card-body">
                <h5 class="card-title titulo-inicio">Contacta con nuestros representantes</h5>
                <p class="card-text">¿Necesitas soporte? ¡No hay problema! Tenemos soporte diario de 8:00 AM a 5:00 PM (GMT-4)</p>
              </div>
              <div class="card-footer">
                  <a href="contacto.html"><button type="button" class="btn btn-outline-success">Contacténos</button></a>
              </div>
            </div>
          </div>
        </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="Bootstrap/js/bootstrap.min.js"></script>
    <script src="JavaScript/main.js"></script>
    <script>
      $(document).ready(function() {
        $('#pagepiling').pagepiling({
            menu: null,
              direction: 'vertical',
              verticalCentered: true,
              sectionsColor: [],
              anchors: [],
              scrollingSpeed: 100,
              easing: 'swing',
              loopBottom: false,
              loopTop: false,
              css3: true,
              navigation: {
                  'textColor': '#fff',
                  'bulletsColor': '#fff',
                  'position': 'right',
                  'tooltips': ['Inicio', 'secondPage', 'thirdPage']
              },
              normalScrollElements: null,
              normalScrollElementTouchThreshold: 5,
              touchSensitivity: 5,
              keyboardScrolling: true,
              sectionSelector: '.section',
              animateAnchor: false,

          //events
          onLeave: function(index, nextIndex, direction){},
          afterLoad: function(anchorLink, index){},
          afterRender: function(){},
        });
      });
    </script>
    <link rel="stylesheet" type="text/css" href="jquery.pagepiling.css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="pagePiling/jquery.pagepiling.js"></script>
  </body>
</html>

Con min-width: 100% y min-height: 100% funcionaba a medias, pero ocupaba más que todo el espacio de la pantalla, e interfiere con las demás secciones del PagePiling porque sale ese cacho de video.

Incluí todo el código porque me lo estaban pidiendo, pero el foro me esta pidiendo que añada más detalles porque detecta como que solo hay código. Alguien que pueda editarlo que borre este parráfo completo que es solo para que me deje publicarlo.

6
  • Coloca por favor tu HTML completo
    – user128299
    Commented el 11 abr. 2020 a las 4:15
  • 1
    Podrías forzarlo de la siguiente manera: jsfiddle.net/vxfn8kwc en este caso igual el height depende del width aunque no se note mucho Commented el 11 abr. 2020 a las 4:40
  • @BryanRetamal te sugiero que agregues tu solución como una respuesta, así evitas que se pierda la información que tienes en el fiddle por una ruptura del enlace, por ejemplo. Además es mucho más fácil para el OP y para futuros visitantes tener la información directamente aquí, en la comunidad.
    – DjCrazy
    Commented el 11 abr. 2020 a las 14:55
  • @BryanRetamal Hola, esa solución ya la estaba usando pero el video se sale de la pantalla, y ocupa un poco la otra parte de la sección y genera problemas...
    – JadeClay
    Commented el 11 abr. 2020 a las 18:36
  • @BetaM ya incluí el HMTL completo. Espero que esto te ayude a darme una solución
    – JadeClay
    Commented el 11 abr. 2020 a las 18:41

1 respuesta 1

2

Adaptar el vídeo al anchura de la pantalla

No sé si pudo solucionar esta interrogante debido al tiempo que ha transcurrido entre la pregunta que formuló y la respuesta que se da en esta publicación.

Sin embargo, se responde a la pregunta en esta publicación por si alguna persona presenta alguna duda sobre cómo solucionar dicho problema.

Empecemos

Podemos utilizar la propiedad object-fit para lograr obtener un resultado parecido a esto:

.video {
  height: 200px;
  width: 100%;
}

.video--cover {
  /* Soporte para navegadores antiguos */
  -moz-object-fit: cover;
  -webkit-object-fit: cover;
  
  /* Estándar CSS */
  object-fit: cover;
}
<video class="video video--cover" src="https://i.imgur.com/B4hlGgb.mp4" controls></video>

De acuerdo al sitio Web oficial Mozilla se define como:

La propiedad CSS object-fit especifica como el contenido de un elemento remplazado debería adaptarse según el alto y ancho de su contenedor.

Por lo tanto, podemos probar todos los valores principales de la propiedad object-fit en el siguiente Snippet (retazo) utilizando JavaScript para apreciar los resultados en tiempo real sobre los valores aplicados sobre vídeo, en las que obsevarás el código CSS generado de forma dinámica según las opciones que vayas cambiando en el siguiente ejemplo:

const cambiarReglaCSS = (_codigo, valor, _video) => {
  let
    codigo = "",
    clases = [];

  clases = [
    "video--fill",
    "video--contain",
    "video--cover",
    "video--none",
    "video--scale-down"
  ];

  codigo += `.video--${valor} {\n`;
  codigo += `  /* Soporte para navegadores antiguos */\n`;
  codigo += `  -moz-object-fit: ${valor}\n`;
  codigo += `  -webkit-object-fit: ${valor}\n`;
  codigo += `\n  /* Estándar CSS */\n`;
  codigo += `  object-fit: ${valor}\n`;
  codigo += `}`;

  if (typeof _codigo !== "undefined") _codigo.textContent = codigo;

  if (typeof _video !== "undefined") {
    for (let clase of clases) {
      _video.classList.remove(clase);
    }

    _video.classList.add(`video--${valor}`);
  }

};

const actualizarAltura = (_codigo, valor) => {
  let codigo = "";

  codigo += `.video {\n`;
  codigo += `  height: ${valor}\n`;
  codigo += `}`;

  if (typeof _codigo !== "undefined") _codigo.textContent = codigo;

}; //

// Cambiar el valor de la propiedad «height» de forma dinámica 
// de la regla «.video {}»:
const maniputarReglaCSS = (_rango, valor) => {
  let reglas = document.styleSheets[valor].cssRules,
    num = 0,
    height;

  for (regla of reglas) {
    num++;

    if (regla.selectorText === ".video") {
      height = regla.style.getPropertyValue("height");
      actualizarAltura(altura, height);
      _rango.value = parseInt(height);

      _rango.oninput = function() {
        actualizarAltura(altura, `${this.value}vh`);
        regla.style.setProperty("height", `${this.value}vh`);
      };

      return;
    }
  }

};

// cambiarReglasCSS:
maniputarReglaCSS(rango, 0);

// Capturar eventos:
seleccionar.onchange = () => {
  let reglaAnterior = "video--fill";
  cambiarReglaCSS(codigo, seleccionar.value, video);
};
/* Fuentes de Google */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap");
::-moz-focus-inner {
  border: 0;
}

:root {
  font-family: "Roboto", sans-serif;
  line-height: 1.4;
}

* {
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  padding: 0;
  padding: 0;
}

main {
  position: absolute;
  padding: 0;
}

h2 {
  margin-top: 0;
}

hr {
  margin: 10px auto;
  width: 100%;
  height: 0;
  border: 0;
  border-bottom: 1px solid;
}

strong {
  font-weight: bold;
}

code {
  background-color: #f0f0f0;
  padding: 0 5px;
}

blockquote p {
  margin: 0;
}

a {
  text-decoration: none;
  color: #0080d4;
}

a:hover {
  text-decoration: underline;
}

ul {
  padding-left: 30px;
}

li {
  margin-top: 0;
  margin-bottom: 5px;
}

video {
  margin: 0;
}

.video {
  width: 100%;
  height: 50vh;
  background-color: rgba(0, 0, 0, 0.8);
}

.video--cover {
  object-fit: cover;
}

.video--fill {
  object-fit: fill;
}

.video--scale-down {
  object-fit: scale-down;
}

.video--contain {
  object-fit: contain;
}

#altura,
#codigo {
  background-color: #e6e6e6;
  width: max-content;
  padding: 5px 10px;
  border: 1px solid silver;
}

#altura:not(:first-of-type),
#codigo:not(:first-of-type) {
  border-left: 0;
}

.flex {
  display: flex;
  justify-content: space-between;
  min-height: 120px;
}

.flex--center {
  align-items: center;
  min-height: auto;
}

.flex__item {
  flex-wrap: wrap;
  flex-grow: 1;
  flex-shrink: 1;
}

.code {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  overflow: auto;
}
<main>
  <h2>La propiedad <code>object-fit</code> aplicado al elemento <code>video</code></h2>

  <hr>

  <p><strong>Nota:</strong>el siguiente código que se generará de forma dinámica en función de las opciones que seleccione es en el que debe concentrarse. También podrás apreciar inmediatamente sus efectos sobre el vídeo en el que se aplica.</p>

  <div class="flex flex--center">
    <input type="range" id="rango" min="1" max="100" step="1" class="flex__item">

    <select id="seleccionar" class="flex__item">
      <option value="fill">object-fit: fill</option>
      <option value="contain">object-fit: contain</option>
      <option value="cover">object-fit: cover</option>
      <option value="none">object-fit: none</option>
      <option value="scale-down">object-fit: scale-down</option>
    </select>
  </div>

  <div class="flex">
    <pre id="altura" class="code flex__item"></pre>
    <pre id="codigo" class="code flex__item"></pre>
  </div>

  <hr>

  <h3>Resultado:</h3>
  <video src="https://i.imgur.com/B4hlGgb.mp4" class="video video--fill" id="video" loop controls></video>
</main>

En el ejemplo anterior se recomienda presionar el enlace «Página completa» para apreciar mejor el ejemplo.

Nota: no se requiere JavaScript para lograr el efecto. Solamente con HTML y CSS es suficiente. JavaScript fue utilizado como herramienta para crear esta ilustración que permitiese realizar cambios de forma dinámica de los valores de la propiedad object-fit

Para aprender un poco más sobre la propiedad object-fit puede consultar los siguientes enlaces:

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.