ここで説明する透明度は、アップロードする動画の透明度ではなく、特にiframe(ウェブ要素を含む)を指します。現時点では、Vimeoにはアルファチャネルのサポートは含まれていません。
記事の内容:
透明な背景
デフォルトでは、プレーヤーのiframeの背景はVimeoでは透明です。すべてのプレーヤー要素(再生バー、ボタンなど)は、iframeの実際のサイズではなく、動画の画像に固定されます。
埋め込みの空白スペースを避けるため、動画のネイティブアスペクト比に一致するプレーヤーサイズを選択することをお勧めします。たとえば、元の動画のアスペクト比が16:9の場合、800 x 450などのアスペクト比が16:9になるサイズで動画を埋め込むことができます。
⚠️注意:埋め込まれたプレーヤーのサイズは、ウェブページによって確立されたCSSスタイルによっても影響を受ける可能性があります。レスポンシブデザインで埋め込まれた動画の場合、動画のネイティブアスペクト比を維持するために、高さと幅の両方が調整されていることを確認してください。
透明な背景をオフにする
プレーヤーの表示が当初意図したものと異なる場合は、透明な背景を無効にすることができます。
- 透明な背景をオフにするには、埋め込みコードのプレーヤー URL の末尾に ?transparent=0 を追加します。このパラメーターは、黒の iframe 背景を強制し、プレーヤー要素をビデオ画像の代わりに iframe に固定します。
埋め込みコードの例:
<iframe src="https://player.vimeo.com/video/137805268?transparent=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>'
⚠️重要:動画が非公開のプライバシーに設定されている場合は、他のパラメータはURLの最後のプライバシーハッシュ (?h=913052c8ff) の後に、? ではなく & を使って追加する必要があります。透明なパラメータを使用した、限定公開の動画のiframeコードの例は次のとおりです:
<iframe src="https://
player.vimeo.com/
カスタムの iframe 背景色を適用する
透明や黒いバーの代わりに、iframeを塗りつぶす確実な色を選択できます。プレーヤー内のテキストと再生バーの色を調整するには、動画プレーヤーの設定にアクセスする必要があります。
- 特定の背景色を適用するには、次のインラインスタイルプロパティを iframe 埋め込みコードに追加する必要があります。
style="background-color: #FFFFFF"
FFFFFFは白の16進値ですが、16進コードデータベースで目的の色を検索できます- http://www.color-hex.com/
埋め込みコードの例:
<iframe src="https://player.vimeo.com/video/236787722" style="background-color: #FFFFFF" width="1000" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
⚠️重要:動画の読み込み中に表示されるフレームの色は変更できません。これによる視聴者への影響はほぼありませんが、インターネット接続が遅い視聴者には影響が出る場合があります。