CSS, добавляющий радиус границы к IFrame

Ответ 1

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

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

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

Удачи!

Ответ 2

Вы также можете сделать это следующим образом:

<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: автовоспроизведение = 1 (0/1 | автоматический режим воспроизведения)

2: loop = 1 (включение/выключение 0/1)

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

4: border = 0 (удаляет границу youtube)

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

Поместите iframe в элемент-оболочку и придайте этому элементу CSS атрибут wrapper:

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>

Ответ 7

Коробчатая тень будет вокруг углов. Просто располагайте расстояние от границы вашей границы и значение размытия 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/

Ответ 8

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

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

Удачи!

Ответ 9

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

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