我正在使用带播放列表的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"> </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在加载后会经历多个媒体查询并缩小尺寸?!不确定......到目前为止如此接近!
谢谢你的帮助!!!
答案 0 :(得分:2)
现在,videoFoam
没有为播放列表拨打电话 - 我知道这是Max希望重新开始工作的内容,但此时它并不是优先级列表的首选。
为了帮助修复令人难以置信的缩小视频,我建议将videoFoam: true
对象从videoOptions
对象移动到顶级对象:
version: "v1",
theme: "bento",
videoFoam: true,
videoOptions: {
volumeControl: true,
autoPlay: true,
videoWidth: 640,
videoHeight: 360,
},
...
如果我们能提供更多帮助,请随时联系我们的支持电子邮件:help@wistia.com。
答案 1 :(得分:0)
VideoFoam选项不适用于播放列表,但我们可以通过一些css技巧实现这一点,
iframe.wistia_playlist {
max-width: 100%;
}
选择BENTO主题 资料来源:http://leopathu.com/content/wistia-responsive-playlist