☰

Vimeo フル幅 [重複] 質問する

tag-icon • tag-icon html css video width vimeo
Vimeo フル幅 [重複] 質問する

Vimeo ビデオを Web ページに全幅で表示しようとしています。

現在の状態は次のようになります。

ここに画像の説明を入力してください

ご覧のとおり、黒部分は全幅ですが、ビデオは全幅ではありません。全幅で、コントロールは表示されず、自動再生され、ループ再生される必要があります。

私のコードは次のようになります:

<iframe src="https://player.vimeo.com/video/208176323?autoplay=1&loop=1&background=1" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

クライアントは vimeo plus を持っていますが、vimeo pro を持っていません。誰か助けてくれませんか。

アップデート：

コードを次のように変更しました:

<style>
    .embed-container {
        position: relative;
        padding-bottom: 56.25%;
        height: 0; overflow: hidden;
        max-width: 100%; height: auto;
    }
    .embed-container iframe, .embed-container object, .embed-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>

<div class='embed-container'><iframe src='https://player.vimeo.com/video/208791851?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

しかし、下部と上部にはまだ黒い枠が残っています。

ここに画像の説明を入力してください

これも確認できる jsfiddle を作成しました:https://jsfiddle.net/07fkfwz3/そして、あなたが見ることができるビデオここ国境はありません。

ベストアンサー1

コンテナ用に作成するマジック パディングの数値は、ビデオのアスペクト比と一致する必要があります。Vimeo でビデオを調べると、解像度は 1296x540 です。アスペクト比のパーセンテージを取得するには、540 / 1296 * 100% = 41.66666667% パディングを割ります。

ビデオが SO サンドボックスでうまく再生されないようなので、修正を加えます。https://jsfiddle.net/mcoker/p7q6x4d5/1/

.embed-container {
  --video--width: 1296;
  --video--height: 540;

  position: relative;
  padding-bottom: calc(var(--video--height) / var(--video--width) * 100%); /* 41.66666667% */
  overflow: hidden;
  max-width: 100%;
  background: black;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class='embed-container'>
  <iframe src='https://player.vimeo.com/video/208791851?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

おすすめ記事