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> |
より詳細な設定方法は下記の記事をご確認ください。
例②：プレイヤーが表示させたい領域内で全表示されず、スクロールバーが出てしまう
指定した表示領域のサイズよりプレイヤーのサイズが大きい場合、
プレイヤーが全表示されずスクロールバーが表示される場合があります。
例②の修正後
例②の場合もプレイヤーの自動リサイズ（レスポンシブデザイン）を有効にすると解消できます。
■プレイヤーの操作ができない
例①：プレイヤー上にマウスカーソルを合わせると画像が表示され、ボタンなどの操作ができない
プレイヤーを埋め込んでいるWebページのcssやjavascriptとの衝突が発生する場合、
プレイヤーが予期せぬ挙動となる可能性があります。
※例①ではプレイヤー上にマウスカーソルを合わせると画像を表示とプレイヤーが非表示となるような処理をcssで記述しています。
例①のcssやjavascriptが適用されていない状態
cssやjavascriptを記述がないためプレイヤーとの衝突が起きない状態となります。
このように例①のような事象が発生していないため、同事象が発生する際にはプレイヤーとcssやjavascriptとの衝突有無をご確認ください。