web-dev-qa-db-ja.com

Vimeoビデオをレスポンシブデザインに埋め込む方法

私はインターネットで多くの調査を行いましたが、この問題はまったく同じものではありません。 <iframe>タグを使用してvimeoの動画を埋め込みたいです。私もこのコードを試しました：

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}



<div class="video-responsive">
    <iframe width="420" height="315" src="http://www.youtube.com/embed/6xisazZX9bA" frameborder="0" allowfullscreen></iframe>
</div>

ただし、大画面の場合、画面も大きくなるため、見栄えがよくありません。提供されているwidthおよびheight以下のサイズに縮小したいだけです。

videoresponsive-designvimeo
9
Jonjie

これは私にとってはうまくいきます。ブートストラップを使用した

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
      </div>
    </div>

  </body>
</html>
5
Ricardo
@media screen and (min-width: 767px) {
  .video-responsive{
     height: 360px;
     padding-bottom: 0;
   }
}

@media screen and (min-width: 320px) {
  .video-responsive{
     height: 300px;
     padding-bottom: 0;
   }
}

このCSSを削除して追加してみてください

3
p_ketan

次のような大きなサイズの画面のメディアクエリにcssを追加します

@media only screen and (min-width: 1600px) {
  .video-responsive {
    padding-bottom: 40%;// whatever you want
    - or -
    give height to this div
  }
}
2
p_ketan

これを試してください。あらゆる種類のメディアデバイスで機能します。

.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%; 
}
<div class='embed-container'>
  <iframe src='https://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
1
Delowar Hosain

これは、Bootstrapからのトリックで、アスペクト比を維持するレスポンシブ要素を作成します。この例では、16：9をビデオオブジェクトとして使用しますが、これを使用して円を作成します、正方形、およびあらゆる種類の形状。

この手法では、コンテナと::before要素を使用します。

HTML

<div class="video-responsive">
  <iframe class="video-responsive-item" src="..."></iframe>
</div>

::before要素は、この要素を実際に機能させるものであるため、注意が必要です。パディングトップを変更すると、アスペクト比が変更されます。つまり、16:9 = 9 / 16 = 56.25%

.video-responsive::before {
  display: block;
  content: "";
  padding-top: 56.25%;
}

heightを制御したい場合は、.video-responsiveコンテナのwidthを変更するだけで済みます。

CSS

.video-responsive {
  position: relative;
  display: block;
  width: 300px;
  overflow: hidden;
}


.video-responsive::before {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.video-responsive-item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
1
Josh Bradley

ビデオプレーヤーのアスペクト比を常に維持するレスポンシブビデオが必要な場合は、正しいことです。

それが大きな解像度で成長し続けるというあなたの点まで、これを修正することができます：

メディアクエリ大画面用のメディアクエリを追加して、以前の回答の1つで提案されているようにビデオのアスペクト比を下げることができます https ：//stackoverflow.com/a/49767577/1993956

max-widthもう1つは、プレーヤーのアスペクト比を気にする場合に、ビデオコンテナーにmax-widthを追加することです。

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    max-width: 800px;
    margin: 0 auto; 
}

次に例を示します。 https://codepen.io/jaireina/pen/YLWKvp

お役に立てば幸いです。

0
Jair Reina
.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

@media screen and (min-width: 1600px) {
  .video-responsive{
     height: 480px;
     padding-bottom: 0;
   }
}

@media screen and (min-width: 767px) {
  .video-responsive{
     height: 360px;
     padding-bottom: 0;
   }
}

@media screen and (min-width: 320px) {
  .video-responsive{
     height: 300px;
     padding-bottom: 0;
   }
}
<div class="video-responsive">
    <iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video"></iframe>
</div>
0
pk_tan777

あなたはそれのためにメディアクエリを与える必要があります、あなたが決めた最大サイズがメディアを書くだけでw.r.tが最大サイズを決めました。 1200pxの最小幅を持つ画面サイズのCSSメディアクエリを書いたように

@media screen and (min-width: 1200px) {
  .video-responsive{
    width: 1170px;
  }
}

これで問題が解決することを願っています

0
Neeraj Rathod

私はこのページのソリューションをVimeoに使用しましたが、うまくいきました： http://embedresponsively.com

また、YouTube、Dailymotion、Googleマップ、Getty Imagesなどをレスポンシブに埋め込むための同じソリューションもあります。 CSSをプロジェクトに適合させるだけで、このサイトが新しいバージョンでこれを最新の状態に保つことが期待されます。

0
eyal_katz