2

プレイリストで 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>

期待どおりにプレーヤーをロードします...しかし、約3つの段階的なステップで、プレーヤーのサイズが非常に小さくなります...約30px x 20px

iframe がいくつかのメディア クエリを通過し、ロード後にサイズが縮小するようです。正確にはわかりません...とても近いですが、これまでのところです！

助けてくれてありがとう!!!

4

2 に答える 2

2

現在、videoFoamプレイリストにダイヤルインしていません。マックスが戻って作業したいと考えていることはわかっていますが、現時点では優先リストの最上位にはありません。

信じられないほど縮小するビデオを修正するには、videoFoam: trueパラメータをvideoOptionsオブジェクトから最上位オブジェクトに移動することをお勧めします。

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

ご不明な点がございましたら、サポート メール help@wistia.com までお気軽にお問い合わせください。

于 2013-05-27T23:24:09.587 に答える
0

プレイリストでは videoFoam オプションを使用できませんが、いくつかの CSS トリックを使用してそれを実現できます。

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

BENTO のテーマを選択 ソース : http://leopathu.com/content/wistia-responsive-playlist

于 2016-05-09T18:42:31.390 に答える