title: How do i make my jwplayer video responsive?
body: <p>i have a video within the Fresca CMS page as below</p>
  
  <pre><code>&lt;script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://content.jwplatform.com/libraries/ovBRFdgO.js"&gt;&lt;/script&gt;
  
  &lt;div class="container u-spacer-v"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-lg-12 spacer50"&gt;    
          &lt;div class="videoWrapper"&gt;
              &lt;div id="media_player"&gt;&lt;/div&gt;
  
              &lt;script type="text/javascript"&gt;
                  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)
                      });
                      });
              &lt;/script&gt;           
          &lt;/div&gt;          
      &lt;/div&gt;
  &lt;/div&gt;      
  </code></pre>
  
  <p></p>
  
  <p>i would like to make this responsive. i have </p>
  
  <pre><code>    &lt;div class="videoWrapper"&gt;
              &lt;div id="media_player"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p>cheers</p>