Как можно победить этот момент.
Загружаю видео с ютуба на сайт, для родительского элемента задаю border-radius, сразу, при загрузке страницы всё нормально, углы скруглены, но после запуска видео оно вылазит за пределы родительского блока.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '160',
width: '340',
videoId: 'M7lc1UVf-VE',
playerVars: {
rel: 0,
controls: 0,
showinfo: 0
}
});
}
.player{
border-radius: 15px;
}
<div class="player" id="player"></div>
Всё решилось, благодаря этому парню
http://stackoverflow.com/questions/7811719/adding-border-radius-for-embedded-youtube-video/21766174#21766174
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '160',
width: '340',
videoId: 'M7lc1UVf-VE',
playerVars: {
rel: 0,
controls: 0,
showinfo: 0
}
});
}
.player{
-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: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
overflow: hidden;
}
<div class="player" id="player"></div>
Сборка персонального компьютера от Artline: умный выбор для современных пользователей