title: How can I make my wistia video player / playlist responsive?
body: <p>I am using Wistia player with a playlist and am trying to figure out how I can make the video player responsive? I would like to have it re-size appropriately based on the screen size. As seen here </p>
  
  <p><a href="http://wistia.github.io/demobin/video-foam/" rel="nofollow">http://wistia.github.io/demobin/video-foam/</a></p>
  
  <p>My current code is fairly straight forward and uses their iframe implementation:</p>
  
  <pre><code>&lt;div id="wistia_1n6492l8d4" class="wistia_embed" style="width:947px;height:388px;" data-video-width="640" data-video-height="360"&gt;&amp;nbsp;&lt;/div&gt;
  
  &lt;script charset="ISO-8859-1" src="http://fast.wistia.com/static/concat/E-v1%2Cplaylist-v1%2Cplaylist-v1-bento%2Csocialbar-v1.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  wistiaPlaylist = Wistia.playlist("1n6492l8d4", {
    version: "v1",
    theme: "bento",
    videoOptions: {
      volumeControl: true,
      autoPlay: true,
      videoWidth: 640,
      videoHeight: 360,
      videoFoam: true
    },
    media_0_0: {
      autoPlay: false,
      controlsVisibleOnLoad: false
    },
    plugin: {
      "socialbar-v1": {
        buttons: "twitter-googlePlus-facebook",
        logo: "true",
        badgeUrl: "http://www.mysite.com/mediacenter",
        badgeImage: "http://embed.wistia.com/deliveries/d58d182a894d86aaa3689db801dae4ebcaeca63a.jpg?image_crop_resized=100x20"
      }
    }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>It loads the player as expected... But then in about three incremental steps the player re-sizes down to be very very small... about 30px x 20px </p>
  
  <p>It's almost as if the iframe goes through several media queries and sizes down after it loads?! Not sure exactly... So close yet so far!</p>
  
  <p>Thank you for helping!!! </p>