web-dev-qa-db-ja.com

CSSを使用してvimeoiframe埋め込みの黒い境界線を削除しますか？

私は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%;
}
cssiframevideovimeo
6
user2498890

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

通常、ビデオiframeの周囲にレターボックスまたはピラーボックスを追加して、プレゼンテーション用に高さと幅を特定の比率に保ちます。ただし、その場合、黒い境界線はcssの背景と同じくらい単純になります。

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

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

コードの概念は次のとおりです。

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

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

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

8
okcoker

CSSですべてのエッジから1pxを切り取ります。

.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);
}
5
matude

HTML：

<div class="js-video [vimeo, widescreen]">
  [video html goes here]
</div>

CSS：

.js-video {
  height: 0;
  padding-top: 25px;
  padding-bottom: 67.5%;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

.js-video.widescreen {
  padding-bottom: 57.25%;
}

.js-video.vimeo {
  padding-top: 0;
}

.js-video embed, .js-video iframe, .js-video object, .js-video video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

あなたはより多くの詳細を見つけるでしょう ここ

2
Alex Z

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

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

#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を介して行います。

0
Keeya Wang-Jones

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

$('.embed-container iframe').unwrap();
0
Glen

。embed-containerのpadding-topを削除することでこの問題を解決しました

パディングボトム：56.25％;画面の比率を16：9に設定し、上部と下部の黒いバーを削除します。ここに上部をパディングすると、後ろに黒いバー領域が追加されます。

0
user1506075

簡単に言えば frameborder="0"属性の1つとして。

0
H. Yang