web-dev-qa-db-ja.com

IFrameに境界半径を追加するCSS

IFrameに境界線を追加するのは大したことではありません。

  border: 4px solid #000;
  -moz-border-radius: 15px;
  border-radius: 15px;

問題は、そのIFrameにコンテンツをロードすると、次のようにコンテンツがコーナーの境界線と重なることです。

IFrame content overlapping with CSS border

この問題をどのように乗り越えることができるかについてのアイデアはありますか？例えば。これを処理するJavaScriptライブラリはありますか...

cssiframeborder
12
JHollanti

境界線の半径はまだ十分にサポートされていないか、一貫性がありません。目的の効果が必要な場合は、要素の周囲にDIVを使用し、代わりにグラフィックを使用して、CSSにオーバーフローを隠してください。 iframeの高さが異なる場合は、引き戸のテクニックを調べることをお勧めします。

http://www.alistapart.com/articles/slidingdoors/

お役に立てれば。

幸運を！

1
Michael Giovanni Pumo

次のようにすることもできます。

<div style="padding:10px;background:#000;webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;width:560px;margin:0 auto;overflow:hidden;">
    <iframe src="http://www.youtube.com/embed/MOVIEID?fs=1&autoplay=1&loop=1&rel=0&border=0&modestbranding=1" width="560" height="315" frameborder="0"></iframe>
</div>

上記の例には、すべてのYouTubeオプションも含まれています。

1：autoplay = 1（0/1 |自動再生ムービー）

2：loop = 1（0/1ループのオン/オフ）

3：rel = 0（映画の終了後に関連する映画を非表示にします。これは常に機能するとは限りません）

4：border = 0（YouTubeの境界線を削除します）

5：modestbranding = 1（youtubeロゴを削除）

13
Plippie

Iframeをラッパー要素に配置し、ラッピング要素にこのCSSプロパティを指定します。

transform: translateY(0px);

.corner-wrapper {
  display: block;
  overflow: hidden;
  width: 300px;
  height: 150px;
  border-radius: 10px;
  transform: translateZ(0px);
  border: 3px solid #eee;
}
<div class="corner-wrapper">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d77935.71780117304!2d9.691260439866745!3d52.37964560033004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47b00b514d494f85%3A0x425ac6d94ac4720!2sHannover!5e0!3m2!1sde!2sde!4v1458445807305" width="300" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
11
Stefan Rein

このプロパティを使用します：

border: 4px solid #000;
-moz-border-radius: 15px;
border-radius: 15px;
overflow: hidden;
7
Samuele Mattiuzzo

これはかなり古いスレッドであることは知っていますが、他の人がカバーしていなかった有効な回避策を見つけました。

あなたが見ているのは、zインデックスの問題です。 iFrameをDIVに配置し、DIVとiframeの位置を絶対に設定するだけです。次に、CSSでz-indexを設定します。それはバブルのYoutubeビデオでうまく機能します！

<style>

#player-wrapper{
    border-radius:50%;  
    border:solid 1px #999;
    width:360px;
    height:360px;
    overflow:hidden;
    position:absolute;
    left:50%;
    top:90px;
    margin-left:-130px;
    z-index:10;
}
#player-wrapper iframe{
    position:absolute;
    left:50%;
    margin-left:-320px; 
    z-index:9;
}
</style>

<div id="player-wrapper">
    <iframe id="player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/rTMMraosnzg></iframe>
</div>
2
shadeydave

Malsup jQueryラウンドコーナープラグインを使用できます。実際の問題は修正されませんが、問題なく角が丸くなります。

1
guanome

あなたがまだこれを理解していない場合は、これを試してください...私のために働きます：

タグに対しても外部でこれを実行しようとすると、機能しないことに気づきました。 iframeタグ内でスタイルを設定します。

幸運を！

0
dfoxii

ボックスシャドウは角を丸めます。境界線の太さの広がり距離とぼかし値0を設定するだけです。これはハックですが、HTMLには何がありませんか？

box-shadow: 0 0 0 1px #000;

1ピクセルの境界線を追加します。最初の2つのゼロはオフセットです。 3番目のゼロは、シャドウに与えるブラーの量です（なし）。 1pxは、シャドウを「外に」移動させたい距離です。最後のパラメータは境界線の色です。ほとんどの人は、影を要素と同じサイズにしたいので、スプレッドを省略します。

これは私がこれを行った例です。これは少なくともIE9とChrome 17： http://www.philihp.com/blog/2012/i-made- a-gps-locator-for-myself /

0
Philihp Busby

実用的なソリューション：（2019）これにより、必要な追加のcssを適用し、iframeを動的に保ちながら、iframeと対話することができます。

このjavascript（またはjquery）関数をページに追加します。

純粋なJavaScriptソリューション：

function setIframeBorder(){
    let iframeBorder = document.getElementsByTagName('iframe-border');
    for(let i = 0; i < iframeBorder.length; i++){
        let iframe = iframeBorder[i].getElementsByTagName('iframe')[0];
        let width = iframeBorder[i].getAttribute('width'); let height = iframeBorder[i].getAttribute('height');
        if(width){iframeBorder[i].style['width'] = width;} if(height){iframeBorder[i].style['height'] = height;}
        iframe.style['width'] = '100%'; iframe.style['height'] = '100%';
        iframeBorder[i].style['overflow'] = 'hidden'; iframeBorder[i].style['display'] = 'inline-block';
        iframe.style['position'] = 'relative'; iframe.style['margin'] = '0';
    }
}
setInterval(setIframeBorder, 10);

jqueryソリューション：

function setIframeBorderJquery(){
    $('iframe-border').each(function(){
        $(this).css({'overflow': 'hidden', 'display': 'inline-block', 'width': $(this).attr('width'), 'height': $(this).attr('height')});
        $('iframe', this).css({'position': 'relative', 'margin': '0', 'width': '100%', 'height': '100%'});
    });
}
setInterval(setIframeBorderJquery, 10);

css :(オプション）

iframe-border{
    border-radius: 20px;
}

使用法：

<iframe-border width="560" height="315">
    <iframe src="https://www.youtube-nocookie.com/embed/ESjRtD0VoRk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</iframe-border>
0
SwiftNinjaPro