ユニバーサル埋め込みコードを介してページにVimeoビデオがあります:
<div class="video">
<iframe src="http://player.vimeo.com/video/VIDEO_ID" width="100%" height="100%" frameborder="0"></iframe>
</div>
VimeoのJavaScriptAPI(http://vimeo.com/api/docs/player-jsvideo
)を使用して、ビデオの再生開始時とビデオの一時停止時のクラスをdiv(divを2倍にする)に追加しています。または終了すると、クラスが削除され、ビデオプレーヤーのサイズが元のサイズにリセットされます。
これはデスクトップ/ラップトップ(Firefox)で期待どおりに機能しますが、Androidスマートフォンでは、iframe(サイズが2倍になると)は以前のサイズに戻りません(パーセンテージなので、video
コンテナーに適応する必要があります)。これにより、iframeはその親divとオーバーラップします。
最初はiframeの幅と高さが100%だと思ったので$('#video1').attr('width', 400);
、動画を停止するときに使用するiframeの幅と高さを固定に指定しましたが、iframeは変更されませんでした(サイズは2倍のまま)。
Androidがそれを行う理由と、iframeのサイズを強制的に変更するにはどうすればよいかについて誰かが考えていますか?