How can you beat this moment. I upload videos from YouTube to the site, for the parent element I set the border-radius , immediately, when the page is loaded, everything is fine, the corners are rounded, but after launching the video it climbs out of the parent block.

 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>

  • overflow: hidden wrapper given? - Boris Runs
  • @BerezhimovBoris gave, to no avail, did not work until he added webkit-mask-image and webkit-transform as in the answer - Vadim Leshkevich

1 answer 1

Everything was decided, thanks to this guy
https://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>