In my video player application, I have implemented a responsive window for playing videos.
.player-window {
position: relative;
padding-bottom: 42%;
height: 0;
overflow: hidden;
max-width: 100%;
}
My goal is to dynamically change the padding-bottom % value whenever a user clicks on a video thumbnail. Here is an attempt at achieving this functionality:
$('.thumbnail').on('click', function() {
$('.player-window').css(padding - bottom: '50%');
$('.player-window').html('embedded video');
});