Webページにプレイヤーを埋め込んだ際、プレイヤーの表示や挙動がおかしくなる場合におきまして、
よくあるお問い合わせとその解消方法をまとめております。
■表示させたい領域内に上手くプレイヤーが表示されない
例①:プレイヤーが表示させたい領域とは異なる場所に表示される
プレイヤーの表示位置を指定していると、表示させたい領域内に上手く納まらない場合があります。
(例①ではプレイヤータグを『<div style="margin:25px"> ~ </div>』で囲んでいます。)
例①の記述例 |
<div style="width:480px;height:270px"> ← 表示させたい領域 <div style="margin:25px"> ← プレイヤーの表示位置を指定 <script type="text/javascript" charset="UTF-8" src="https://ssl-cache.stream.ne.jp/www50/eqXXXXXXXX/jmc_pub/jmc_swf/player/t3/if.js"></script> <script type="text/javascript"> jstream_t3.PlayerFactoryIF.create({ b:"eqXXXXXXXX.eq.webcdn.stream.ne.jp/www50/eqXXXXXXXX/jmc_pub/jmc_swf/player/", c:"XXXXXXXX", m:"XXXX", s:{ hp:270, wp:480 }}); </script> </div> </div> |
例①の修正後
プレイヤーの表示位置を指定せずに、プレイヤータグを
『<div style="width:100%; position:relative; padding-bottom:56.25%;"> ~ </div>』で囲み、
かつ、「プレイヤーの自動リサイズ(レスポンシブデザイン)」
が有効になっているプレイヤーを選択して発行した貼り付けタグを埋め込むことで、
表示させたい領域内に納まるようになる場合があります。
(例①の『<div style="margin:25px"> ~ </div>』部分は削除しています。)
(『padding-bottom』で指定している『56.25%』はプレイヤーサイズが『16:9』の場合です。)
例①修正後の記述例 |
<div style="width:480px;height:270px"> <div style="width:100%;position:relative;padding-bottom:56.25%"> <script type="text/javascript" charset="UTF-8" src="https://ssl-cache.stream.ne.jp/www50/eqXXXXXXXX/jmc_pub/jmc_swf/player/t3/if.js"></script><script type="text/javascript"> jstream_t3.PlayerFactoryIF.create({ b:"eqXXXXXXXX.eq.webcdn.stream.ne.jp/www50/eqXXXXXXXX/jmc_pub/jmc_swf/player/", c:"XXXXXXXX", m:"XXXX", s:{ hp:270, wp:480, rp:"fit" ← 「プレイヤーの自動リサイズ(レスポンシブデザイン)」が有効になると追加 }}); </script> </div> </div> |
より詳細な設定方法は下記のページをご参照ください。
例②:プレイヤーが表示させたい領域内で全表示されず、スクロールバーが出てしまう
表示領域に対してプレイヤーサイズの方が大きい場合、
プレイヤーが全表示されず、スクロールバーが出てしまう場合があります。
例②の修正後
例②の場合もプレイヤーの自動リサイズ(レスポンシブデザイン)を有効にすることで
解消できる場合がございますのでお試しください。
■プレイヤーの挙動がおかしい
例①:プレイヤー上にマウスカーソルを合わせると画像が表示され、ボタンなどの操作ができない
プレイヤーを埋め込んでいるサイトのcssやjavascriptとの競合により、
プレイヤーが予期せぬ挙動となる恐れがあります。
(例①では、プレイヤー上にマウスカーソルを合わせると画像を表示、かつ、
プレイヤーが非表示となるような処理をcssで記述しています。)
例①のcssやjavascriptを一切適用させていない状態
cssやjavascriptを記述せずに、単にプレイヤーを埋め込むだけでは
例①のような事象は起こりませんので、
プレイヤーとcssやjavascriptが競合していないかどうかご確認をお願いいたします。