Добавление радиуса границы для встроенного видео YouTube

См. эту скрипту. Обратите внимание сразу перед загрузкой border-radius отлично работает. Через несколько миллисекунд исчезают закругленные углы.

Как добавить закругленные углы к встроенным видео YouTube?

Ответы

Ответ 2

Это очень просто, используя CSS3. Все, что вы, ребята, упускаете, - это z-index, который играет плохого полицейского.

Посмотрите на код ниже, я завернул игрока в div, установил его высоту и ширину, как мне нравится, установите переполнение в скрытое и z-index по мере необходимости. Радиус границы работает довольно удивительно!

.player {
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
  height: 320px;
  width: 480px;
}
<div class="player">
<iframe width="480" height="320" src="https://www.youtube.com/embed/aiegUzPX8Zc" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>

Ответ 3

Чтобы создать внешний вид закругленных углов, вам нужно сделать четыре наложения div, которые выглядят как закругленный угол и позиционируют их в каждом углу. Это не элегантное решение, но это единственный способ создать этот эффект.

Ответ 4

Пример для округления углов на YouTube-видео или что-то еще, например iframe или img-теги.

<div style="
width: 560px;
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); /*ios 7 border-radius-bug */
-webkit-transform: rotate(0.000001deg); /*mac os 10.6 safari 5 border-radius-bug */
-webkit-border-radius: 10px; 
-moz-border-radius: 10px;
border-radius: 10px; 
overflow: hidden; 
">
<iframe width="560" height="315" src="http://www.youtube.com/embed/ZM0e1m9T9HQ" frameborder="0">
</iframe>
</div>

Ответ 5

Сначала браузер рассматривает его как любой другой элемент блока и применяет радиус границы. Затем объект вспышки заканчивает загрузку и просто переместится сверху, так как нет способа использовать радиус границы на объекте вспышки, они исчезают.

Ответ 6

Если вам разрешено, попробуйте прямое встраивание/объект (лучше всего с swfobject или что-то еще) и wmode = прозрачный или wmode непрозрачный (предпочтительный)

http://jsfiddle.net/AkPXj/19/

Ответ 7

К сожалению, округление углов встроенных Flash-видео, таких как YouTube и Vimeo, довольно сложно из-за различий между старыми браузерами.

Если все ваши конечные пользователи работают с браузером, поддерживающим HTML5, просто добавьте player=html5 к адресу iframe, например: http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&player=html5. Это заставит их браузер загружать версию HTML5 видео, а border-radius будет работать нормально.

Если некоторые браузеры ваших конечных пользователей не поддерживают HTML5, все начинает становиться уродливым.

Следующее из самых элегантных решений будет похоже на то, что предложил Ivijan-Stefan, который должен адресовать каждый браузер индивидуально и бросать тег !important на каждый элемент, возможно дополненный добавлением wmode=transparent к адресу iframe например: http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&wmode=transparent.

Это позволит вам приобрести совместимость с несколькими дополнительными версиями браузеров, поэтому вы можете называть это завершением на этом этапе.

Для тех из нас, которые нуждаются в поддержке разных браузеров (Internet Explorer 6, кто-нибудь?), однако, единственный надежный способ сделать это - сделать изображение, которое выглядит как изогнутый угол, и использовать копии этого изображения, чтобы скрыть каждый из углов видео. (Это также требует трюка wmode=transparent, который я описал выше, так как некоторые из худших нарушителей в противном случае будут отображать угловые изображения под видео!)

Вот пример этой методики, применяемой к видеороликам с текстом iframe: http://jsfiddle.net/skywalkar/uyfR6/ (пример radius = 20px)

Примечание. Если вы делаете угловые накладки слишком большими (больше, чем ~ 20 пикселей), тогда они будут закрывать элементы управления проигрывателя!
Чтобы свести к минимуму последствия этой проблемы, вы можете попытаться разрезать углы, поворачивая изображения на 45 градусов. Для этого требуется другой набор наложений и какое-то творческое использование полей, но может стоить проблем, если вам нужны большие угловые радиусы: http://jsfiddle.net/skywalkar/BPnLh/ ( пример радиуса = 30px)

Ответ 8

Это возможно только при включенном режиме HTML5 для проигрывателя youtube.

Демо здесь: http://jsfiddle.net/3f9DB/1/

Ответ 10

Здесь легко, но очень практично и полезно "взломать" решение этой сложной проблемы.

Просто вставьте свой iframe в элемент "div" следующим образом:

  <div>
   <iframe allowfullscreen="" frameborder="0" height="445" player="html5"scrolling="no" src="https://www.youtube.com/embed/DCTwJJhQFy8"   width="780"></iframe>
  </div>

затем добавьте следующий код в ваш HTML:

 div {
   position: relative;
   display:inline-block;
   margin:200px;
}
div:before {
    content: '';
    position: absolute;
    z-index: 5000;
    display: block;
    top: -27px;
    left: -27px;
    right: -27px;
    bottom: -27px;
    background-color: transparent;
    pointer-events: none;
    border: 30px solid white;
    border-radius: 50px;
}][1]

Это довольно гибкое решение, хотя для пограничного радиуса используется дополнительный слой. Этот метод также совместим с большинством (всех) современных браузеров. Надеюсь, это было полезно.

Ответ 11

Вам нужно добавить этот код в ваш CSS.

<style>
.div-round {
    overflow: hidden;
    position: relative;
    z-index: 10;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}

.div-round::before {
    display: block;
    content: "";
}

.iframe-round {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    border: 0;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}
</style>

И просто примените эти классы к вашему div и iframe индивидуально.

<div class="div-round" style="width: 640px; height: 360px;">
    <iframe class="iframe-round" allow="autoplay; encrypted-media; fullscreen" src="https://www.youtube.com/embed/Xjs6fnpPWy4?modestbranding=1&autoplay=0"></iframe>
</div>

Окончательный результат должен отображаться так.

Sample Image