How can I make my wistia video player / playlist responsive?

Question

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

http://wistia.github.io/demobin/video-foam/

My current code is fairly straight forward and uses their iframe implementation:

<div id="wistia_1n6492l8d4" class="wistia_embed" style="width:947px;height:388px;" data-video-width="640" data-video-height="360">&nbsp;</div>

<script charset="ISO-8859-1" src="http://fast.wistia.com/static/concat/E-v1%2Cplaylist-v1%2Cplaylist-v1-bento%2Csocialbar-v1.js"></script>

<script>
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"
    }
  }
});
</script>

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

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!

Thank you for helping!!!

Answer 1

Right now, videoFoam isn't dialed in for playlists - I know it is something Max wants to go back and work on, but it is not top of the priority list at this moment.

To help fix the incredible shrinking video, I would recommend moving the videoFoam: true param from your videoOptions object to the top level object:

version: "v1",
  theme: "bento",
  videoFoam: true,
  videoOptions: {
    volumeControl: true,
    autoPlay: true,
    videoWidth: 640,
    videoHeight: 360,
  },
...

Feel free to reach out to our support email: help@wistia.com, if we can be further helpful!

Answer 2

The videoFoam options is not available for the Playlist, but we could achieve that with some css tricks,

iframe.wistia_playlist {
  max-width: 100%;
}

choose BENTO theme Source : http://leopathu.com/content/wistia-responsive-playlist