2

絶対にわからない問題が発生しました。YouTubeビデオiframeを使用したWebサイトを取得し、CSSを介して境界線を丸めたいと考えています。http://www.wunschpreisdeal.de/empfehlung/winterreifen-profiltiefe-und-zustand-noch-okでは、ビデオは丸みを帯びた境界線で正しく埋め込まれていますが、http：//www.wunschpreisdeal.de/mitglieder-ではそうではありません。 empfehlung/the-axe-effect。

それらは両方とも同じCSSを持っています、私はそれらの統合の間に違いを見つけませんでした。誰か助けてもらえますか？さらに情報が必要な場合は、お問い合わせください。:)

どうも

4

2 に答える 2

3

小さくても美しいトリック。

iframe,
object,
embed{
    border:5px solid rgba(255,255,255,0);
    -webkit-border-radius: 20px !important; 
    -ms-border-radius: 20px !important; 
    -o-border-radius: 20px !important;  
    border-radius: 20px !important;     
}

デモ

于 2014-10-02T11:53:19.700 に答える
3

前もってあなたの質問に答えるために、これらの 2 つのページの違いは、次のようにアドレスに が追加wmode=transparentされていることです。これで簡単に作業を開始できますが、この件についてもう少し詳しく知りたい場合は、このまま読み進めてください。iframehttp://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&wmode=transparent

残念ながら、YouTube や Vimeo などの埋め込みビデオの角を丸くすることは、古いブラウザーの違いにより非常に困難です。iframeをアウターでラップし、ラッパーにanddivを適用しても、ほとんどの で機能しますが、確実にうまくいくとは限りません! border-radiusoverflow: hiddeniframes

注: Ivijan-Stefan は、最新のほとんどのブラウザーで動作する以下の洗練されたソリューションを思いつきました。そのため、サイトが Internet Explorer 6 や 7 などの従来のブラウザーに対応する必要がない場合は、代わりに彼の実装を自由に使用してください!

さまざまなレガシーブラウザをサポートする必要がある私たちにとって、これを行うための唯一の一貫して信頼できる方法は、曲がったコーナーのように見える画像を作成し、この画像のコピーを使用してビデオの各コーナーを覆うことです. wmode=transparent(一部のブラウザーではビデオの 下にコーナーの画像が表示されるため、ここで上記のトリックが必要になります)。

iframe埋め込まれたYouTube ビデオにこの手法を適用した例を次に示します: http://jsfiddle.net/skywalkar/uyfR6/ (例の半径 = 20px)

注: コーナー オーバーレイを大きくしすぎると (~20 ピクセル以上)、プレーヤー コントロールが隠れてしまいます。
問題の影響を最小限に抑えるために、画像を 45 度回転させてコーナーをカットしてみてください。これには、別のオーバーレイ セットと余白の創造的な使用が必要ですが、より大きな角の半径が必要な場合は、苦労する価値があるかもしれません: http://jsfiddle.net/skywalkar/BPnLh/ (例の半径 = 30px)

于 2013-03-13T19:37:03.873 に答える