4

YouTube 動画をモバイル ページに埋め込むと、iPhone で多くのスクロールの問題が発生します (他のデバイスでも同じ問題になると思います)。ビデオ自体をタップしても、ユーザーはページをスクロールできません。埋め込みに使用するコードは次のとおりです

<iframe width="270" height="152" frameborder="0" src="http://www.youtube.com/embed/nBJCbUMHna4?rel=0"></iframe>

とにかくこの問題を解決できますか? たとえば、動画のサムネイル画像のみを表示し、ユーザーがその画像をタップしたときに再生することはできますか。ページにiframeの代わりに画像があると、スクロールの問題はなくなると思います。

YouTube ビデオの html5 バージョンを使用しようとしましたが、IPhone はまだビデオをフラッシュの方法でレンダリングしているようです。

 <iframe width="270" height="152" frameborder="0" src="http://www.youtube.com/embed/nBJCbUMHna4?rel=0&html5=True"></iframe>
4

4 に答える 4

3

以下のスニペットは、JavaScript のトリッキーなしでトリックを実行しているように見えます。同時に、これにより iOS でのスクロールの勢いも確実に得られます。

*{
    -webkit-overflow-scrolling: touch;
}
于 2017-09-25T21:35:00.427 に答える
1

モバイル サイトの Vimeo でもこの問題が発生しています。ユーザーが問題を抱えていることを理解するのにさえ、しばらく時間がかかりました. 私たちがチェックしている回避策の 1 つは、ビデオの上に div レイヤーを追加して、ユーザーが通常どおりスクロールできるようにすることです。また、スクロールとタップを区別するカスタム再生ボタンとしても機能するか、ダブルタップが必要になる可能性があります。ビデオを再生します。それを行う方法の一般的な原則についてのステップバイステップの情報がここにあります ( https://css-tricks.com/play-button-youtube-and-vimeo-api/ )。他の人がこれを修正するためのより良いオプションを見つけたかどうかを知りたい.

于 2016-02-22T20:04:37.033 に答える