動画 動画プレーヤーをカスタマイズする さまざまなデバイスでのデバイスの向きの影響

デバイスの向きは、デスクトップやノートパソコンでは問題になりません。
しかし、携帯端末やタブレット末端ではデザインを検討する際には非常に重要です。
iPhone の Safari は、縦向きと横向きでの切り替えが非常にスムーズです。

縦向きの iPhone の Safari で再生している動画のスクリーンショット

横向きの iPhone の Safari で再生している動画のスクリーンショット

iPadやAndroidでは、デバイスの向きが問題になる場合があります。

例　横向きの iPad での動画の再生をカスタマイズしなかった場合。

横向きの iPad Retina の Safari で再生している動画のスクリーンショット

CSS で width: 100% または max-width: 100% と設定すると、デバイスの向きによるレイアウトの問題の多くは解決できます。
また、フルスクリーンの代替手段も検討しなければならない場合があります。




関連記事

• さまざまなデバイスでのデバイスの向きの影響
• インラインまたはフルスクリーン表示
• コンテンツのフルスクリーン表示の制御