eラーニングプレイヤーはモバイル用とPC用とでは異なるeラーニングプレイヤーが表示されます。そのためiframe利用時にモバイル端末でeラーニングプレイヤーのチャプターを表示させる場合は、お客様サイト側で専用のCSSを適用する必要がございます。以下に概要とサンプルコードを記載しますのでご参照ください。
概要
- 本件はiframe利用時のみ該当します。
- 現状eラーニングプレイヤーはPC/タブレット用とモバイル用の2種類あります。
- プレイヤーの縦横値はPC/タブレット用は990px:500px固定、スマホ用はレスポンシブです。
- PC/タブレット時のCSSをモバイル時も流用すると、モバイル時にチャプターまたは資料が隠れてしまいます。
対策
- モバイル時にチャプターが表示されるCSSサンプルをご用意しました。
- デフォルトではデバイスの横幅が600px以下の時はモバイル用と判断するように設定しています。
- 横幅による端末判定は、お客様サイトの仕様により異なりますので、上記の値はお客様にて任意の値に変更してください。
サンプルCSS
今後について
- 現在PC/タブレット版のeラーニングプレイヤーのレスポンシブ対応を進めております。
- PC/タブレット版のeラーニングプレイヤーのレスポンシブ対応が完了すると、上記CSSの設定は不要になります。
- ただし、大変恐縮ですが、PC/タブレット版のeラーニングプレイヤーのレスポンシブ対応は、作業量が多いためご提供時期は未定となります。進捗は管理画面等でご報告いたします。