Vimeo の URL を貼り付けて埋め込んだ動画は、モバイルデバイスで動画の上下に余白が多すぎます。
以下の URL をモバイルで確認して、問題を再現してください:
https://try.discourse.org/t/testing-video-embeds/1369
スクリーンショット:
「いいね！」 3
ここで起きていることは、iframe タグの幅と高さが固定されている一方で、Vimeo の埋め込み動画は幅が 100% に拡張され、高さは自動調整されることです。
これは、ワンボックスに埋め込まれた他の動画でも再生開始時に同様の現象が発生しますが、サイズの変動を予測してコンテナ全体を使用し、黒背景を適用することで対応しています。
例えば、Dailymotion は以下のようになります:
ここで考えられる最も簡単な解決策は、Vimeo の iframe に黒背景を適用することです。その様子は以下のようになります:
レイアウトがページ読み込み中に揺らぐのを防ぐために、高さを固定する必要があります。アスペクト比を判定して、小さな画面に合わせて寸法を調整するなど、より高度な対応が可能かどうかはわかりません（@techAPJ）？
「いいね！」 3
とりあえず黒背景にしておこう。
Streamableでも同じことが起こっています。