Video width does not work

Question

Video width does not work

Navigation

#1 by (0 votes)

0

I try to modify the width and it grows but until the height grows I do not know what I could do or if I'm doing it wrong, example is like this

Now just modifying the width grows as a whole and not just the width

CSS

@font-face {
  font-family: MyriadPro-Regular;
  src: url("../fonts/MyriadPro-Regular.otf") format("opentype");
}

/* mobile */
@media screen and (max-width: 767px) {
  /**/
  body {
    overflow: visible !important;
  }
  body #box-container {
    height: 93vh !important;
    padding-top: 9vh !important;
  }
  body #footer {
    position: absolute;
    top: 2vh !important;
    width: 100vw;
    text-align: right !important;
    padding: 0;
    height: 7vh !important;
  }
  body #footer .img-rs {
    display: inline-block;
    width: 10%;
  }
  body #footer .img-rs:hover {
    cursor: pointer;
  }
  body #footer #terminos-y-condiciones {
    display: none;
    margin-top: 1vh;
    background-color: rgba(0, 0, 0, 0.5);
  }
  body #footer #terminos-y-condiciones h4 {
    color: white;
  }
  body #modal {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
  }
  body #modal .container {
    position: absolute;
    top: 5vh !important;
    left: 10vw !important;
    width: 80vw !important;
    height: 90vh !important;
    background-color: white;
    border-radius: 10px;
  }
  body #modal .container img#boton-cerrar {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8% !important;
  }
  body #modal .container img#boton-cerrar:hover {
    cursor: pointer;
  }
  body #modal .container #box-modal {
    height: 100%;
  }
  body #modal .container #box-modal #box-modal-titulo {
    text-align: center;
    height: 10%;
  }
  body #modal .container #box-modal #box-modal-titulo h1 {
    display: initial !important;
    font-size: 9vw;
  }
  body #modal .container #box-modal #box-modal-info {
    padding-top: 10%;
    text-align: center !important;
    height: 40%;
  }
  body #modal .container #box-modal #box-modal-info video {
    width: 100% !important;
    float: initial !important;
    margin-right: 1vw;
    margin-bottom: 1vh !important;
  }
  body #modal .container #box-modal #box-modal-info h1 {
    display: none !important;
  }
  body #modal .container #box-modal #box-modal-info p {
    font-size: 4vw !important;
    text-align: justify !important;
  }
  body #modal-bienvenido .container {
    position: fixed;
    top: 15vh !important;
    left: 10vw !important;
    width: 80vw !important;
    height: 70vh !important;
  }
  body #modal-bienvenido .container img#boton-cerrar {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8% !important;
  }
  body #modal-bienvenido .container img#boton-cerrar:hover {
    cursor: pointer;
  }
  body #modal-bienvenido .container #box-modal {
    height: 100%;
  }
  body #modal-bienvenido .container #box-modal #box-modal-titulo {
    text-align: center;
    height: 35% !important;
  }
  body #modal-bienvenido .container #box-modal #box-modal-info {
    padding-top: 10%;
    text-align: justify;
    height: 55% !important;
  }
  body #modal-bienvenido .container #box-modal #box-modal-info p {
    font-size: 4vw !important;
  }
  body #modal-init {
    padding-top: 5%;
    margin-left: 5%;
    margin-left: 24%;
  }
  body #modal-init img#boton-cerrar {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10%;
  }
  #modal-header-init {
    border-bottom: 0px;
  }
  .modal .modal-popout-bg {
    height: 105%;
    padding-top: 3%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 270%;
  }
  .titulo-modal {
    text-align: center;
  }
  .titulo-modal h3 {
    font-weight: bold;
    color: black;
    margin-top: -5%;
  }
  #modal_init_content {
    text-align: justify;
    padding-top: 1%;
    padding-left: 5%;
    padding-right: 12%;
    padding-bottom: 2%;
    color: black;
  }
}

/* tablet */
@media screen and (min-width: 768px) and (max-width: 991px) {
  /**/
  body #box-container {
    height: 88vh;
    padding-top: 12vh !important;
  }
  body #modal {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
  }
  body #modal .container {
    position: absolute;
    top: 15vh !important;
    left: 10vw !important;
    width: 80vw !important;
    height: 70vh !important;
    background-color: white;
    border-radius: 10px;
  }
  body #modal .container img#boton-cerrar {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 6% !important;
  }
  body #modal .container img#boton-cerrar:hover {
    cursor: pointer;
  }
  body #modal .container #box-modal {
    height: 100%;
  }
  body #modal .container #box-modal #box-modal-titulo {
    text-align: center;
  }
  body #modal .container #box-modal #box-modal-titulo h1 {
    display: initial !important;
    font-size: 5vw;
  }
  body #modal .container #box-modal #box-modal-info {
    padding-top: 5%;
    text-align: center !important;
    height: 70% !important;
  }
  body #modal .container #box-modal #box-modal-info video {
    width: 50% !important;
    margin-right: 1vw;
    margin-bottom: 1vh !important;
  }
  body #modal .container #box-modal #box-modal-info h1 {
    display: none !important;
  }
  body #modal .container #box-modal #box-modal-info p {
    font-size: 3vw !important;
    text-align: justify !important;
  }
  body #modal-bienvenido .container {
    position: fixed;
    top: 20vh !important;
    left: 15vw !important;
    width: 70vw !important;
    height: 60vh !important;
  }
  body #modal-bienvenido .container img#boton-cerrar {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 5%;
  }
  body #modal-bienvenido .container img#boton-cerrar:hover {
    cursor: pointer;
  }
  body #modal-bienvenido .container #box-modal {
    height: 100%;
  }
  body #modal-bienvenido .container #box-modal #box-modal-titulo {
    text-align: center;
    height: 20% !important;
  }
  body #modal-bienvenido .container #box-modal #box-modal-info {
    padding-top: 10%;
    text-align: justify;
    height: 70% !important;
  }
  body #modal-bienvenido .container #box-modal #box-modal-info p {
    font-size: 2.5vw !important;
  }
  body #modal-init {
    padding-top: 5%;
  }
  body #modal-init img#boton-cerrar {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10%;
  }
  #modal-header-init {
    border-bottom: 0px;
  }
  .modal .modal-popout-bg {
    height: 105%;
    padding-top: 3%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 150%;
  }
  .titulo-modal {
    text-align: center;
  }
  .titulo-modal h3 {
    font-weight: bold;
    color: black;
  }
  #modal_init_content {
    text-align: justify;
    padding-top: 1%;
    padding-left: 5%;
    padding-right: 12%;
    padding-bottom: 2%;
    color: black;
  }
}

/* desktop */
html {
  height: 100vh;
}

body {
  height: 100vh;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background: radial-gradient(circle, #c23030, #750c0d);
  overflow: hidden;
  font-family: "MyriadPro-Regular";
}

body #box-container {
  height: 93vh;
  padding-top: 5vh;
}

body #box-container #box-logo-y-formulario #box-logo img {
  width: 60%;
  margin: auto;
}

body #box-container #box-logo-y-formulario #box-formulario form .form-group {
  text-align: center;
  margin-bottom: 10px;
}

body #box-container #box-logo-y-formulario #box-formulario form .form-group label.telefonos {
  color: white;
  position: absolute;
  left: -25px;
  margin-top: 7px;
}

body #box-container #box-logo-y-formulario #box-formulario form .form-group label.comuna {
  color: white;
  position: absolute;
  left: -40px;
  margin-top: 7px;
}

body #box-container #box-logo-y-formulario #box-formulario form .form-group label.error {
  color: #b7b7b7;
  margin-bottom: 0;
}

body #box-container #box-logo-y-formulario #box-formulario form .form-group .form-control::placeholder {
  color: #b7b7b7;
}

body #box-container #box-logo-y-formulario #box-formulario form .form-group .form-control {
  border-radius: 50px;
  background: none;
  border-color: #e7b336;
  color: white;
}

body #box-container #box-logo-y-formulario #box-formulario form .form-group button {
  padding: 5px 19px;
  border-radius: 50px;
  background-color: #e7b336;
  color: #750c0d;
}

body #box-container #box-logo-y-formulario #box-formulario form .form-group .bootstrap-select button {
  background: none;
  color: white;
  border-color: #e7b336;
  text-transform: capitalize;
}

body #box-container #box-logo-y-formulario #box-formulario form .form-group .bootstrap-select .dropdown-menu li a {
  text-transform: capitalize;
}

body #box-container #box-logo-y-formulario #box-formulario form .form-group .bootstrap-select .dropdown-menu .active a {
  background-color: #c23030;
}

body #box-container #box-logo-y-formulario #box-formulario form .form-group .bootstrap-select .dropdown-menu .bs-searchbox .form-control {
  color: #333;
}

body #box-container #box-logo-y-formulario #box-formulario form #error {
  opacity: 0;
  color: #882a28;
  background-color: #edc0c0;
  padding: 5px 19px;
}

body #box-container #box-informativo {
  text-align: center;
}

body #box-container #box-informativo #info {
  padding: 5px 19px;
  border-radius: 50px;
  background-color: #e7b336;
  color: #750c0d;
}

body #footer {
  position: absolute;
  bottom: 0;
  width: 100vw;
  text-align: center;
  padding: 0;
  height: 7vh;
}

body #footer .img-rs {
  display: inline-block;
  width: 10%;
}

body #footer .img-rs:hover {
  cursor: pointer;
}

body #footer #terminos-y-condiciones {
  display: none;
  margin-top: 1vh;
  background-color: rgba(0, 0, 0, 0.5);
}

body #footer #terminos-y-condiciones h4 {
  color: white;
}

body #modal {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
}

body #modal .container {
  position: absolute;
  top: 10vh;
  left: 15vw;
  width: 70vw;
  height: 80vh;
  background-color: white;
  border-radius: 10px;
}

body #modal .container img#boton-cerrar {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 3%;
}

body #modal .container img#boton-cerrar:hover {
  cursor: pointer;
}

body #modal .container #box-modal {
  height: 100%;
}

body #modal .container #box-modal #box-modal-titulo {
  text-align: center;
  height: 10%;
}

body #modal .container #box-modal #box-modal-titulo div {
  margin-top: 2vh;
}

body #modal .container #box-modal #box-modal-titulo div h1 {
  display: none;
}

body #modal .container #box-modal #box-modal-info {
  padding-top: 5%;
  text-align: justify;
  height: 40%;
}

body #modal .container #box-modal #box-modal-info video {
  width: 40%;
  float: left;
  margin-right: 4vw;
}

body #modal .container #box-modal #box-modal-info h1 {
  text-align: center;
}

body #modal .container #box-modal #box-modal-info p {
  font-size: 1.3vw;
}

body #modal-bienvenido {
  display: none;
  position: absolute;
  left: 0;
  z-index: 10000;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.3);
}

body #modal-bienvenido .container {
  position: fixed;
  top: 16vh;
  left: 34vw;
  width: 33vw;
  height: 50vh;
  background-color: white;
  border-radius: 16px;
  border-style: solid;
  border-width: 7px;
  border-color: rgba(255, 0, 0, 0.5);
}

body #modal-bienvenido .container img#boton-cerrar {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 5%;
}

body #modal-bienvenido .container img#boton-cerrar:hover {
  cursor: pointer;
}

body #modal-bienvenido .container #box-modal {
  height: 100%;
  padding: 0px;
}

body #modal-bienvenido .container #box-modal #box-modal-titulo {
  text-align: center;
  height: 10%;
}

body #modal-bienvenido .container #box-modal #box-modal-info {
  padding-top: 10%;
  text-align: justify;
  height: 80%;
}

body #modal-bienvenido .container #box-modal #box-modal-info p {
  font-size: 1.5vw;
}

body #modal-init {
  height: 90%;
  width: 20%;
  padding-top: 5%;
}

body #modal-init img#boton-cerrar {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 10%;
}

body #modal-header-init {
  border-bottom: 0px;
}

body .modal .modal-popout-bg {
  height: 90%;
  padding-top: 7%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 20px;
  border-color: rgba(197, 42, 42, 0.45);
}

body .modal-content {
  border: 10px solid rgba(0, 0, 0, 0.4);
}

body .titulo-modal {
  text-align: center;
}

body .titulo-modal h3 {
  font-weight: bold;
  color: black;
}

body #modal_init_content {
  text-align: justify;
  padding-top: 1%;
  padding-left: 12%;
  padding-right: 12%;
  padding-bottom: 5%;
  color: black;
}

body #linea {
  size: 5px;
  width: 99%;
}

body #img-modal-init {
  position: absolute;
  bottom: 0%;
  right: 0px;
  width: 100%;
}

body #reg-mod {
  text-align: justify;
  padding-top: 1%;
  padding-left: 12%;
  padding-right: 12%;
  padding-bottom: 5%;
  color: black;
}

body #img-modal-welcome {
  width: 9%;
}

body #img-modal-welcome-hand {
  width: 7%;
  position: absolute;
}

body #img-modal-welcome2 {
  position: absolute;
  bottom: 0%;
  right: 0px;
  width: 60%;
}

body #box-modal-titulo p {
  padding: 4%;
  padding-top: 0;
  padding-bottom: 0;
}

body #title-welcome {
  padding-top: 12%;
}

body #container-modal-wel {
  width: 60%;
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scale=no"/>
    <meta name="description" content=""/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./libs/bootstrap-select/css/bootstrap-select.min.css"/>
    <link rel="stylesheet" href="./css/main.css"/>
    <script src="./libs/jquery/jquery.min.js"></script>
    <script src="./libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="./libs/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script src="./libs/jquery-validation/jquery.validate.min.js"></script>
    <title>Naw</title>
  </head>
  <body>
    <div class="container" id="box-container">
      <div class="col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-3" id="box-logo-y-formulario">
        <div class="row" id="box-logo">
          <div class="col-xs-12 col-sm-12 col-md-12"><img class="img-responsive" src="./images/logos/logo.png" alt="Naw Logo"/></div>
        </div>
        <div class="row" id="box-formulario">
          <div class="col-xs-10 col-xs-offset-1 col-sm-12 col-sm-offset-0 col-md-12 col-md-offset-0">
            <form id="formu">
              <div class="form-group">
                <input class="form-control" type="text" name="nombre_apellido" placeholder="Nombre / Apellido"/>
              </div>
              <div class="form-group box-telefono">
                <label class="telefonos" for="telefono">+56 9</label>
                <input class="form-control" id="telefono" type="text" name="telefono" placeholder="Teléfono"/>
              </div>
              <div class="form-group box-telefono">
                <label class="telefonos" for="confirmar-telefono">+56 9</label>
                <input class="form-control" id="confirmar-telefono" type="text" name="confirmar_telefono" placeholder="Confirme su Teléfono"/>
              </div>
              <div class="form-group">
                <input class="form-control" type="email" name="email" placeholder="Mail"/>
              </div>
              <div class="form-group">
                <label class="comuna" for="comuna">Comuna</label>
                <select class="form-control selectpicker" id="comuna" name="comuna" data-live-search="true">
                  <option value="cerrillos">cerrillos</option>
                  <option value="cerro navia">cerro navia</option>
                  <option value="conchalí">conchalí</option>
                  <option value="el bosque">el bosque</option>
                  <option value="estación central">estación central</option>
                  <option value="huechuraba">huechuraba</option>
                  <option value="independencia">independencia</option>
                  <option value="la cisterna">la cisterna</option>
                  <option value="la florida">la florida</option>
                  <option value="la pintana">la pintana</option>
                  <option value="la granja">la granja</option>
                  <option value="la reina">la reina</option>
                  <option value="las condes">las condes</option>
                  <option value="lo barnechea">lo barnechea</option>
                  <option value="lo espejo">lo espejo</option>
                  <option value="lo prado">lo prado</option>
                  <option value="macul">macul</option>
                  <option value="maipú">maipú</option>
                  <option value="ñuñoa">ñuñoa</option>
                  <option value="padre hurtado">padre hurtado</option>
                  <option value="pedro aguirre cerda">pedro aguirre cerda</option>
                  <option value="peñálolén">peñálolén</option>
                  <option value="pirque">pirque</option>
                  <option value="providencia">providencia</option>
                  <option value="puente alto">puente alto</option>
                  <option value="pudahuel">pudahuel</option>
                  <option value="quilicura">quilicura</option>
                  <option value="quinta normal">quinta normal</option>
                  <option value="recoleta">recoleta</option>
                  <option value="renca">renca</option>
                  <option value="san bernardo">san bernardo</option>
                  <option value="san joaquín">san joaquín</option>
                  <option value="san josé de maipú">san josé de maipú</option>
                  <option value="san miguel">san miguel</option>
                  <option value="san ramón">san ramón</option>
                  <option value="santiago">santiago</option>
                  <option value="vitacura">vitacura</option>
                </select>
              </div>
              <div class="col-xs-12 col-sm-9 col-md-9 alert alert-danger" id="error" role="alert">
                <p>Mensaje de error</p>
              </div>
              <div class="form-group col-xs-12 col-sm-2 col-md-2">
                <button class="btn" type="submit">Recibir Ofertas</button>
              </div>
            </form>
          </div>
        </div>
        <div class="row" id="box-informativo">
          <div class="col-xs-12 col-sm-12 col-md-12">
            <button class="btn" id="info" data-target="#modal">¿Qué es Naw?</button>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid" id="footer">
      <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4"><img class="img-responsive img-rs" src="./images/logos/mail.png" alt="" data-href="[email protected]" data-type="mail"/><img class="img-responsive img-rs" src="./images/logos/fb.png" alt="" data-href="https://www.facebook.com/NAW-133950147218870/" data-type="link"/><img class="img-responsive img-rs" src="./images/logos/insta.png" alt="" data-href="https://www.instagram.com/naw_cl/" data-type="link"/></div>
    </div>
    <div class="container-fluid" id="modal">
      <div class="container"><img id="boton-cerrar" src="./images/logos/cerrar.png" alt="" data-target="#modal"/>
        <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1" id="box-modal">
          <div class="row" id="box-modal-titulo">
            <!-- <div class="col-xs-12 col-sm-12 col-md-12"> yo--> 
              <h1>¿Qué es Naw?</h1>
            <!-- </div> -->
          </div>
          <div class="row" id="box-modal-info">
              <video src="./video/que_es.mp4" autoplay="autoplay" loop="loop">Tu navegador no implementa el elemento <code>video</code>.</video>
            <div class="col-xs-12 col-sm-12 col-md-12">
              <!-- <video src="./video/que_es.mp4" autoplay="autoplay" loop="loop">Tu navegador no implementa el elemento <code>video</code>.</video> -->
              <!-- <h1>¿Qué es Naw?</h1> -->
              <!-- <p>
                NAW es una plataforma gratuita, creada para que recibas ofertas exclusivas de marcas, productos y servicios directamente a tu Whatsapp.
                Para ser parte sólo debes rellenar el formulario en www.NAW.cl, Ingresando tu nombre, teléfono celular, mail y comuna.
                Así de fácil es ser el primero en recibir las mejores ofertas!!
              </p> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid" id="modal-bienvenido">
      <div class="container" id="container-modal-wel"><img id="boton-cerrar" src="./images/logos/cerrar.png" alt="" data-target="#modal-bienvenido"/>
        <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1" id="box-modal">
          <div class="row" id="box-modal-titulo">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <h1 id="title-welcome"><strong>¡Que tal!</strong><img class= "d-flex" id="img-modal-welcome-hand" src="./images/logos/manita.png"></h1>
              <h3 class="display-1">Ya eres Parte de NAW.</h3>
              <hr id="linea">
              <p>En cualquier momento recibirás las mejores ofertas que tenemos  pensadas para ti</p>
              <img class= "img-fluid" id="img-modal-welcome" src="./images/logos/wink.png">
            </div>
          </div>
          <!-- <div class="row" id="box-modal-info">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <p>
                Desde hoy recibirás ofertas exclusivas de marcas, productos y servicios que recopilaremos especialmente para ti. 
                Gracias y atento porque serás el primero en recibir ofertas.
              </p>
            </div>
          </div> -->
        </div>
        <img class= "img-fluid" id="img-modal-welcome2" src="./images/logos/naw-popup.png">
      </div>
    </div>

      <div class="modal " id="modal-inicio" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" id="modal-init" role="document">
          <div class="modal-content modal-popout-bg">
            <div class="modal-header" id="modal-header-init">
              <img type="button" id="boton-cerrar" src="./images/logos/cerrar.png" alt="" data-target="#modal-inicio"  data-dismiss="modal">
            </div>
            <div class="modal-body" id="">
              <div class="row titulo-modal">
                <h3> Hola! Bienvenido a NAW </h3>
              </div>
              <div class="row" id="modal_init_content">
                <p>
                  Somos una plataforma gratuita que ofrece servicios exclusivos de marcar y productos directamente a tu  WhatsApp
                  <br><br>
                  Regístrate y sé el primero en recibir las mejores ofertas.
                </p>
              </div>
            </div>

            <img class= "img-fluid" id="img-modal-init" src="./images/logos/naw-popup.png">
          </div>
        </div>
      </div>




    <script src="./js/app.js"></script>
    <script type="text/javascript">
      $(window).on('load',function(){
          $('#modal-inicio').modal('show');
      });
    </script>

  </body>
</html>

html css

asked by Naoto 29.09.2017 в 16:54

source

1 answer

Netbeans does not recognize Cygwin Warning: mysqli_fetch_array () expects parameter 1 to be mysqli_result, boolean given in C: \ xampp \ htdocs \ Projects_Php \ search_page.php on line 34

score 0 · Answer 1

It does not work for you because increasing the width the element will always grow depending on its size, to make the height do not grow you must restrict it

info video{
    width: 55%;
    float:left;
    margin-right: 4vw;
    height: 200px /* o la altura que necesites */
}

Try this, I hope it works for you, regards!