How do i make my jwplayer video responsive? - html

Question

i have a video within the Fresca CMS page as below
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://content.jwplatform.com/libraries/ovBRFdgO.js"></script>
<div class="container u-spacer-v">
<div class="row">
<div class="col-lg-12 spacer50">
<div class="videoWrapper">
<div id="media_player"></div>
<script type="text/javascript">
var playerInstance;
$(document).ready(function () {
playerInstance = jwplayer("media_player").setup({
"playlist": [{
"sources": [{
"file": "http://content.jwplatform.com/videos/tNGbzoVc-F67Awtrj.mp4",
}],
"tracks": [{
"file": "https://content.jwplatform.com/tracks/YFoEjMQx.vtt",
"label": "English",
"kind": "captions"
}]
}],
"captions": {
"color": "FE94AB",
"backgroundColor": "000000",
"backgroundOpacity": 100,
"fontSize": 8
},
"autostart": false,
"controls": true,
"primary": "flash",
"aspectratio": "16:9"
});
/*
playerInstance.on('ready', function () {
$('#status').html("JW7. Provider name: " + playerInstance.getProvider().name);
});
*/
playerInstance.on('captionsList', function (t) {
console.log(t)
});
});
</script>
</div>
</div>
</div>
i would like to make this responsive. i have
<div class="videoWrapper">
<div id="media_player"></div>
which ordinarily would deal with it but because id="media_player" forces the player to have a size i am not able to work round this. does anyone have an idea on how to achieve responsiveness please?
cheers

Answer 1

In your css add this:
#media (max-width: 767px) {
.videoWrapper {
width: 100%;
}
#media_player {
width: 100%;
}
#media_player
{
width: 100%;
}
}