Скруглить углы у видео с ютуба

234

26 ноября 2016, 18:36

Как можно победить этот момент. Загружаю видео с ютуба на сайт, для родительского элемента задаю 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>

Answer 1

Всё решилось, благодаря этому парню
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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Размер DIV в зависимости от размера окна

Имеем две колонки, левая к примеру 250px, правая в зависимости от размера окна, к примеру до 900px правая колонка 600px, если размер окна более 1100px...

312

CSS

Как запретить скролинг на чистом CSS

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

271

CSS

Отступ при использовании legend в fieldset

При использовании legend, снизу него появляется отступ и всё выглядит неравномерно:

439

CSS

Css className:nth-child - как сделать подобие nth-child для класса

Есть группа li элементов с заданным классамКак выбрать ряд и отдельные элементы (input в li) для определенного класса?

188