Ответ 1
Вам просто нужно установить стили границ:
border:20px solid #000;
См. эту скрипту. Обратите внимание сразу перед загрузкой border-radius
отлично работает. Через несколько миллисекунд исчезают закругленные углы.
Как добавить закругленные углы к встроенным видео YouTube?
Вам просто нужно установить стили границ:
border:20px solid #000;
Это очень просто, используя 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>
Чтобы создать внешний вид закругленных углов, вам нужно сделать четыре наложения div
, которые выглядят как закругленный угол и позиционируют их в каждом углу. Это не элегантное решение, но это единственный способ создать этот эффект.
Пример для округления углов на 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>
Сначала браузер рассматривает его как любой другой элемент блока и применяет радиус границы. Затем объект вспышки заканчивает загрузку и просто переместится сверху, так как нет способа использовать радиус границы на объекте вспышки, они исчезают.
Если вам разрешено, попробуйте прямое встраивание/объект (лучше всего с swfobject или что-то еще) и wmode = прозрачный или wmode непрозрачный (предпочтительный)
К сожалению, округление углов встроенных 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)
Это возможно только при включенном режиме HTML5 для проигрывателя youtube.
Демо здесь: http://jsfiddle.net/3f9DB/1/
Вы можете обернуть iframe следующим образом: http://jsfiddle.net/xmarcos/D4sS7/
Здесь легко, но очень практично и полезно "взломать" решение этой сложной проблемы.
Просто вставьте свой 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]
Это довольно гибкое решение, хотя для пограничного радиуса используется дополнительный слой. Этот метод также совместим с большинством (всех) современных браузеров. Надеюсь, это было полезно.
Вам нужно добавить этот код в ваш 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>
Окончательный результат должен отображаться так.