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