CSS добавление радиуса границы в IFrame

Question

Добавление границы в IFrame не так уж и важно - вы делаете это следующим образом, например:

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

Проблема заключается в том, что при загрузке содержимого в этот IFrame содержимое перекрывает границы в углах,вот так:

Есть идеи, как можно обойти эту проблему?Например, есть ли библиотека JavaScript, которая позаботится об этом ...

Answer 1

Вы также можете сделать это так:

<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: цикл = 1 (включение / выключение цикла 0/1)

3: rel = 0 (скрыть похожие фильмы после окончания фильма, это не всегда работает)

4: border = 0 (убирает границу YouTube)

5: modestbranding = 1 (удаляет логотип YouTube)

Answer 2

Поместите 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>

Answer 3

Используйте это свойство:

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

Answer 4

Я знаю, что это довольно старая тема, но я нашел для нее подходящее решение, которое другие не рассмотрели.

То, что вы видите, это проблема z-индексации.Все, что вам нужно сделать, это поместить iFrame в DIV и установить абсолютную позицию DIV и iframe.Затем установите свой z-индекс в CSS.Отлично работает с 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>

Answer 5

Радиус границы пока не поддерживается или не поддерживается.Если вы хотите получить желаемый эффект, попробуйте использовать DIV вокруг элемента и использовать вместо этого графику с переполнением скрытого в вашем CSS.Возможно, вы захотите посмотреть на раздвижные двери, если ваш фрейм варьируется по высоте.

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

Надеюсь, это поможет.

Answer 6

Вы можете использовать Malsap jQuery плагин с округленными углами.Это не решит реальную проблему, но даст вам закругленные углы без проблем.

Answer 7

Вы пропускаете overflow и position свойства.Это должно работать:

    border: 4px solid #000;
    -moz-border-radius: 15px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;

Answer 8

Если вы еще не поняли это, попробуйте это ... работает для меня:

Я заметил, что если вы попытаетесь сделать это внешне даже для тега, это не сработает,Установить стиль внутри тега iframe.

Удачи!

Answer 9

Коробка-тень закруглит углы. Просто разберитесь в толщине вашей границы и установите значение размытия 0. Это хак, но что не в HTML?

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

Добавит границу в 1 пиксель. Первые два нуля являются смещением. Третий ноль - сколько размытия вы хотите дать тени (нет). 1px - насколько далеко вы хотите, чтобы тень ушла. Последний параметр - это цвет границы. Большинство людей опускают спред, потому что хотят, чтобы их тени были того же размера, что и элемент.

Вот пример, где я это сделал, который работает как минимум в IE9 и Chrome 17: http://www.philihp.com/blog/2012/i-made-a-gps-locator-for-myself/