レスポンシブ(デフォルト)埋め込みコードを使用して動画を埋め込むと、動画プレーヤーの上下に余白が表示される問題が発生する場合があります。
この余白は、埋め込みコードの前にあるパディング%が原因で発生します。この空白を取り除くためにできることがいくつかあります。
-
カスタムサイズ:動画設定ページで、共有ボタン > 埋め込み > カスタマイズ >からプライバシーオプションを選択し、カスタムサイズを設定するをオンにします。
トグルの下にあるテキストボックスを使用して、プレーヤーの側面を編集します。 -
パディングの編集:埋め込みコードのパディングのパーセンテージを手動で編集できます。親コンテナの高さと幅がわかっている場合は、パディングの値を「parentHeight/parentWidth %」として入力します。
例:親コンテナが5000ピクセルx10000ピクセルの場合、パディングは50%になります。
以下は、50%のパディングを含む埋め込みコードのサンプルです。
<div style="padding:50% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/000?h=000&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; gyroscope; accelerometer" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Tour of Ibiza"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
-
パディングの削除:必要に応じ、コードの先頭から行「padding:50% 0 0 0;position:relative;」を削除することで、デフォルトの埋め込みコードからパディングを完全に削除できます。
以下はパディングのないサンプル埋め込みコードです。<div style= ><iframe src="https://player.vimeo.com/video/000?h=000&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; gyroscope; accelerometer" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Tour of Ibiza"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
埋め込み動画で引き続き問題が発生する場合は、サポートチームにご連絡ください。
埋め込みの問題についてサポートチームにお問い合わせの際は、サポートチケットに次の情報を記載してください。
- 埋め込み動画のURL
- 動画が埋め込まれているウェブページへのリンク(必要に応じてログイン情報も)
- 埋め込み方法:HTML埋め込みコードまたは動画のURL/ダイレクトファイルリンクを使用して動画を埋め込んでいますか?