ULIZAヘルプセンター

プレイヤーの映像領域やボタンの表示が崩れる原因は何ですか?

A.CSSが干渉してプレイヤーの表示が正しくできていない可能性があります

 

ULIZAプレイヤーはHTML5をベースに構築されているため、プレイヤーを埋め込んだWebページに設定したCSSが干渉してプレイヤーが正しく表示できない場合があります。

以下のような事象が発生する場合には、Webページに設定されているCSSを見直していただく事で回避できる場合があります。

  • プレイヤー中央や下部に表示されるボタンの位置がずれたり、サイズが大きかったり小さかったりする
  • プレイヤーに表示される映像が拡大されていたり「左上の箇所だけ」など、部分的にしか表示されない
  • ボタンをクリックしても反応しない

 など

 

 ▼表示が崩れているプレイヤーのイメージ

20230614_01.png

 

改善方法


プレイヤーを埋め込んだWebページに設定しているCSSを確認して、プレイヤーに干渉するスタイル定義の記述を変更します。

また、script型のプレイヤータグでプレイヤーを実装している場合は、CSSの干渉を受けにくい、iframe型のプレイヤータグでプレイヤーを埋め込む事で回避できる可能性もあります。

 

[改善方法1] プレイヤーに干渉するスタイル定義の記述を変更する

ページの運用や保守のご担当者に、プレイヤーに干渉しているスタイル定義の調査をご依頼ください。

またブラウザから確認できるサイトの場合には、弊社側でもある程度の調査が可能な場合があります。
保守担当者へのご依頼や調査が難しい場合など、お困りの際はULIZAサポートセンターまでお気軽にご相談ください。

なおご相談いただく場合には、以下内容について事前に共有いただく事で確認がスムーズに行えますので、ご協力をお願いいたします。

  • ご契約のULIZAアカウント名
  • 事象が発生した際のスクリーンショット
  • 事象が発生した視聴環境(端末名・OSおよびバージョン・ブラウザおよびバージョン)
    ※分かる範囲で結構です
  • 事象が発生するWebページのURL
    ※再現テストを実施するために、可能であれば弊社からアクセスできる状態にしてください。
    また該当ページに直接アクセスできない場合には、ページにたどり着く為の手順も合わせてご教示ください

 

[改善方法2] ページに埋め込むプレイヤータグをiframe型に変更する

WebページのCSSの干渉を受けている場合の多くは、script型のプレイヤータグをご利用されています。
ページに埋め込むプレイヤータグをiframe型に変更する事で干渉を防げる可能性があります。

iframe型のプレイヤータグの発行方法についてはこちらをご覧ください。
※iframe型はプレイヤーの特定機能がご利用いただけない等の制限があります。
 制限の詳細はこちらをご覧ください。

ページにプレイヤータグを埋め込む方法についてご不明な場合には、ページの運用や保守のご担当者にご確認ください。
(確認する際に伝える内容など、何かお困りの際にはULIZAサポートセンターまでお気軽にご相談ください)