私のアプリケーションには、フルスクリーンの Youtube ビデオが含まれており、その上に情報とリンクがオーバーレイされています。jQuery プラグインTubePlayerを使用して、Youtube ビデオを<div>要素に埋め込みます。リンクとコンテンツは他<div>の にオーバーレイされ、Z インデックスが高くなります。
これは、デスクトップ ブラウザーでうまく機能します。
また、ユーザーが最初にページにアクセスしたときに、iOS でも正常に機能します。リンクは動画の上に重ねて表示され、YouTube の「再生」ボタンは動画のポスター画像の上に表示されます (画像を参照)。すべてのリンクはクリック可能です。ユーザーが「再生」を押すと、ビデオが Safari のフルスクリーン ビデオ プレーヤーで開きます。
この問題は、ユーザーが「完了」を押して iOS ビデオ プレーヤーを終了すると発生します。プレーヤーは前の画面に戻ります。すべてのリンクは引き続き画像の上に表示されますが、クリックできなくなりました。さらに、赤い Youtube 再生ボタンはグレーの iOS 再生ボタンに置き換えられました (画像を参照)。
オーバーレイされたリンクが表示されるのに、クリックできない理由がわかりません。これをどのように処理できるかについてのアイデアはありますか? 私は、ほぼすべてのタイプのソリューションに対してオープンです。