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

Question

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

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

Answer 1

Вам просто нужно установить стили границ:

border:20px solid #000;

http://jsfiddle.net/jalbertbowdenii/AkPXj/20/

Answer 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>

Answer 3

Пример для получения закругленных углов на видео YouTube или что-нибудь еще, например, iframes или теги 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>

Answer 4

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

Answer 5

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

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

Answer 6

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

Answer 7

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

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

---

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

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

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

---

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

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

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

Answer 8

Вам нужно добавить этот код в вашу 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>

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

Answer 9

Вот простое, но очень практичное и полезное «решение для взлома» этой сложной проблемы.

Просто вставьте свой iframe в элемент «div», например:

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

затемдобавьте следующий CSS в ваш 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]

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

Answer 10

Вы можете обернуть iframe следующим образом: http://jsfiddle.net/xmarcos/D4sS7/