0

Por qué no funciona esta función? Quiero que cuando el ancho de la ventana sea igual o menor de 425px le añada ese estilo al div #video-container

if ($(window).width() <= 425){
  $('#video-container').css({'margin-bottom': '-250px !important'});  
}
.no-padding{
	padding:0px !important;
}
.no-margin{
	margin:0px !important;
}
#video-container{
	height:85vh;
	overflow:hidden;
}
.video{
	width: 100%;
	overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="no-margin no-padding">
  <section class="row no-padding no-margin">
     <div id="video-container" class="row no-margin no-padding">
         <video autoplay loop muted>
           <source src="http://techslides.com/demos/sample-videos/small.mp4">
         </video>
      </div>
                   ...
                 Código HTML
                   ...
  </section>
</article>

2
  • ¿Puedes enseñar un código reproducible? Tal y como lo tienes ahora no le veo ningún fallo a simple vista. el 21 nov. 2016 a las 9:10
  • actualizado el op
    – Pavlo B.
    el 21 nov. 2016 a las 9:13

1 respuesta 1

2

El operador =< debe ser <=

Y la syntaxis del css() esta mal

if ($(window).width() <= 425){

  $('#video-container').css({'margin-top': '250px'});  
}

Te recomiendo que uses window.innerWidth

Ver demo

Mi primera respuesta se debe antes de las ediciones: Enlace


Edit según las ediciones y comentarios:

Te dejo un demo donde uso solo css con media query... y según las ediciones te he corregido también el css...

Ver demo 2

@media screen and (max-width: 425px) {  
  #video-container{
      top: -250px;
  }
}

Un ejemplo más como realizar en JS/jQuery un comportamiento igual al CSS media query con el evento .resize() de jQuery:

Ver demo 3

$(function(){

    $(window).resize(function(){

        if (window.innerWidth <= 425){

            $('#video-container').css({'top': '-250px'});  

        } else {

          $('#video-container').css({'top': 'initial'});
        }
    });
});
10
  • Yup!! Eso mismo. el 21 nov. 2016 a las 9:22
  • Cambiado en el op y tampoco funciona
    – Pavlo B.
    el 21 nov. 2016 a las 9:24
  • Tampoco funciona con esa sintaxis del css...
    – Pavlo B.
    el 21 nov. 2016 a las 9:36
  • @PavloB. - Porque editas cada vez tu pregunta... si lo editas no tiene sentido mi respuesta para otros el 21 nov. 2016 a las 9:40
  • 1
    @PavloB. si puedes realizar cosas con CSS, te será mucho más rápido, tanto a la hora de escribir el código, como para el navegador al renderizar y no tener que cargar javascript
    – Zander
    el 21 nov. 2016 a las 15:34

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.