4

I am using a responsive window for playing videos.

.player-window {
    position: relative;
    padding-bottom: 42%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
} 

I would like to change the padding-bottom % for each video that I click. Heres is what I tried just guessing. It does not work but I think its clear what Im trying to do.

$('.thumbnail').on('click', function() {
    $('.player-window').css(padding - bottom: '50%');
    $('.player-window').html('embedded video');
});

2 Answers 2

5

You can use or

$('.player-window').css('padding-bottom','50%');

or

$('.player-window').css({'padding-bottom':'50%'});

Documentation http://api.jquery.com/css/

1
  • Missing quotes in the second version.
    – Barmar
    Aug 31, 2015 at 22:16
1

You can't use - in an object property literal unless you quote it. Either use camelCase or quote the property.

$('.player-window').css({paddingBottom: '50%'});

or

$('.player-window').css({'padding-bottom': '50%'});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.