如何使我的 wistia 视频播放器/播放列表响应？答案

【问题标题】：How can I make my wistia video player / playlist responsive?如何使我的 wistia 视频播放器/播放列表响应？
【发布时间】：2013-05-24 00:57:37
【问题描述】：

我正在使用带有播放列表的 Wistia 播放器，并试图弄清楚如何使视频播放器具有响应性？我想让它根据屏幕大小适当地重新调整大小。如此处所示

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

我当前的代码相当简单，并使用他们的 iframe 实现：

<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>

它按预期加载播放器...但是在大约三个增量步骤中，播放器重新缩小到非常小...大约 30px x 20px

这几乎就像 iframe 在加载后经历了几次媒体查询和尺寸缩小一样？！不太清楚……这么近，这么远！

谢谢你的帮助！！！

【问题讨论】：

标签： javascript jquery css html5-video video-player

【解决方案1】：

现在，videoFoam 没有拨入播放列表 - 我知道这是 Max 想要返回并继续工作的内容，但目前它不是优先级列表的首位。

为了帮助修复令人难以置信的缩小视频，我建议将 videoFoam: true 参数从您的 videoOptions 对象移动到顶级对象：

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

如果我们能提供更多帮助，请随时联系我们的支持电子邮件：help@wistia.com！

【讨论】：

这结合了 javascript 并且运行良好：jQuery(window).resize(function() { wistiaPlaylist.width(jQuery(window).width() * .90).constrainToWidth ();});
感谢您发送该信息！我们仍在计划videoFoam'ing 播放列表，但这应该在短期内奏效！
@JeffVincent 是否有针对 WordPress 中 Wistia 嵌入的流畅（而不是断点）响应式解决方案？我有一个客户想在他们的流畅响应网站（内置于 Foundation 3）上嵌入视频来代替特色图片，但我不确定流畅实施它的最佳方式（如果可能的话）。跨度>
@Ennui 抱歉耽搁了！如果您还没有找到 videoFoam 插件，这就是您想要的流畅方法：wistia.com/labs/videofoam

【解决方案2】：

videoFoam 选项不适用于播放列表，但我们可以通过一些 css 技巧来实现，

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

选择 BENTO 主题来源：http://leopathu.com/content/wistia-responsive-playlist

【讨论】：