web-dev-qa-db-ja.com

Vimeo全幅

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

これは、現在の外観です。

enter image description here

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

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

<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はありません。誰かがこれで私を助けることができます。

UPDATE：

コードをこれに変更しました：

<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>

しかし、私はまだ下部と上部に黒い境界線があります。

enter image description here

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

htmlcssvideowidthvimeo
14
nielsv

コンテナ用に作成するマジックパディング番号は、ビデオのアスペクト比と一致する必要があります。 vimeoでビデオを検査する場合、解像度は1296x540です。アスペクト比のパーセンテージを取得するには、540/1296 = 41.66666667％のパディングを割ります。ビデオはSOサンドボックスでうまく再生されないようです。 https://jsfiddle.net/07fkfwz3/6/

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
}
                
.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>
41
Michael Coker

これを試して

<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/208176323?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

編集

だから私はフィドルを見た後、私はあなたの問題を次のように修正することができました：

CSS

        .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: 13%;
      width: 100%;
      height: 75%;
    }

HTML

<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>
5
Jesse de gans

HTMLは

<div class='container'>
  <div class="vcontent">
  <iframe src="https://player.vimeo.com/video/208791851?autoplay=1&loop=1&background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>

そしてスタイリング

.container {
      position: relative;
      padding-bottom: calc(70vh - 6.7em);
      height: 0;
      overflow: hidden;
      max-width: 100%;

    }
    .container .vcontent {
       position: absolute;
   overflow: hidden;
   height: calc(70vh - 6.2em);
   width: 100%;
   margin-top: -0.5em;
    }
    .container iframe,
    .container object,
    .container embed {
      position: absolute;
  overflow: hidden;
      top: 0;
      left: 0;
      width: 100%;
      height: 70vh;
  padding: 0;
  margin: -3em 0;
    }
0
Ankush Verma

これを試すことができます： https://jsfiddle.net/c4j73z16/4/

html

<div class='embed-container'>
  <div class="vcontent">
  <iframe src="https://player.vimeo.com/video/208176323?autoplay=1&loop=1&title=0&byline=1&portrait=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>

css

<style>
  .embed-container {
    position: relative;
    padding-bottom: calc(70vh - 6.7em);
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }

  .embed-container .vcontent {
    position: absolute;
    overflow: hidden;
    height: calc(70vh - 6.2em);
    width: 100%;
    margin-top: -0.5em;
  }

  .embed-container iframe,
  .embed-container object,
  .embed-container embed {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 70vh;
    padding: 0;
    margin: -3em 0;
  }
</style>

vhの高さとさらにdiv.vcontent、必要なものにより適切に一致するように適切に移動します。

0
g.annunziata

これは私のために働いた：

<style>
  .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }

  .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/157467640?background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

ソース： https://forum.webflow.com/t/setting-vimeo-video-to-full-width-of-div/25499/2

0
Lucas