8

vimeo ビデオの上部と下部にある黒い帯を隠す方法を見つけようとしています。CSSでそれらを隠す方法があるのではないかと思いました。

私は基本的に、この人が達成したいことを下のリンクの画像で達成したかったのですが、埋め込みビデオでそれをレスポンシブに保ちたいと思っていました.

YouTube サムネイルの黒い枠 4:3 を削除する

どうもありがとう。

HTML

<section class="d5-d13 c5-c13 b5-b13 a5-a13 video">

   <div class='embed-container'>
      <iframe src='http://player.vimeo.com/video/69252713' frameborder='0'
      webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
   </div>

</section>

CSS

.embed-container { 
position: relative; 
padding-bottom: 56.25%; 
padding-top: 30px; 
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%;
}
4

8 に答える 8

9

あなたのユースケースでは、cssだけを使用できるとは思いません。

通常、動画の iframe の周りにレターボックスまたはピラー ボックスを追加して、表示のために高さと幅を特定の比率に保ちます。ただし、その場合、黒い境界線は CSS の背景と同じくらい単純になります。

応答性を維持するには、高さをゼロのような値に設定し (あなたが持っているように)、パディング ハックを使用してビデオの縦横比を維持します (この場合は 16:9 ビデオ; 9/16 * 100 = 56.25%) ）。その数値は、padding-top または padding bottom の値のいずれかになります。パディングはパーセントで測定されるため、ビデオのサイズに関係なく正しい比率を維持しながら、幅に関連してパディングをスケーリングします。

あなたの場合、このビデオには実際のビデオにレターボックスがあり、iframe 内のビデオ タグのソースから確認できます。を持っている理由はわかりませんpadding-top:30が、黒い境界線がさらに大きくなります。ただし、レターボックスが組み込まれているため、状況をさらにハックする必要があります。ここに jsfiddle デモをまとめました。これにはいくつかのコメントが含まれていますが、JS を使用して探しているものを実現しています。

コードのコンセプトは次のとおりです。

  • 外側のコンテナでビデオの下部と上部を切り取りたいとします。ビデオをレスポンシブにしてトリミングしたいと仮定すると、実際のビデオは常に、それをマスクする外側のコンテナよりも大きくする必要があります。
  • ビデオは、ビデオの幅と上部の境界線の太さに関連して上に移動する必要があります
  • 外側のコンテナの高さを少し縮小して、負のトップ マージンを補い、それでもビデオの下部を非表示にする必要があります。

個人的には、サイズ変更時に高価な DOM 操作を行うのは好きではありません。これが、css のみを要求した理由かもしれませんが、FWIW、デモがあります。

理想的には、レターボックスなしでビデオを再録画するのが最善の方法です。必要なのはパディング ハックだけです。

于 2013-11-05T23:30:44.510 に答える
8

CSS ですべての端から 1 ピクセルを切り取ります。

.embed-container { 
    position: relative; 
    padding-bottom: 43%;        /* Aspect ratio of the video */
    height: 0; 
    overflow: hidden; 
    max-width: 100%;
} 

.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
    position: absolute; 
    top: -1px; 
    left: -1px;
    width: calc(100% + 2px); 
    height: calc(100% + 2px);
}
于 2015-09-22T14:05:14.077 に答える
0

私はこれと同じ問題を抱えていましたが、問題は簡単に解決できました。私のビデオは、oEmbed を使用して Wordpress のページと投稿に埋め込まれていました。Wordpress は、埋め込まれたビデオを<p>タグでラップしていました。タグに<p>はマージンがあり、ビデオの上下に黒い境界線が発生していました。次の jQuery を使用して<p>、埋め込まれた動画からタグを削除しました。

$('.embed-container iframe').unwrap();
于 2014-09-26T00:12:59.990 に答える
0

この github 投稿の一部を使用して、この正確な問題の解決策を作成しました。ブラックバーの削除。vimeo の背景色は変更されませんが、ビューポートから非表示になるだけです。

https://github.com/davatron5000/FitVids.js/issues/130

#myid {
  height: 112.6%;
}

ただし、CSS「vw」(ビューポート幅) を使用して幅を追加すると、黒い背景を表示することなく、どのモニター/デバイスでも一貫したサイズになります。幅が短くなるとiframeがdivの中央に留まるようにマージンを追加しました。

#myvimeoiframeID {
  height: 112%;
  width: 80vw;
  margin: 0 15% auto;

}

ビデオを保持する親コンテナーに、次を追加しました。

.embed-container {
   padding-bottom: 40.25%;
}

これにより、ビデオがdivに表示されるようになります。このセクションを削除すると、ビデオは消えますが、ここで再生できます。したがって、パディングボトムにはかなり素晴らしいものがあります: 40.25%;

vimeo 埋め込み iframe コードを変更して、height="100%" にしました。

したがって、iframe に高さを追加するか、css で行うことができます。css で高さを制御するために、iframe のベースの高さを 100% に保ち、そのベースの高さの調整は CSS を介して行います。

于 2017-03-29T20:28:50.160 に答える