J'aimerais que les 4 coins d'un iframe vidéo YouTube soient arrondis.
<div class="youTubeContainer">
<iframe width="500" height="300" src="https://www.youtube.com/embed/QzDeMXSgGl0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
.youTubeContainer {
width: 100%;
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
-webkit-transform: rotate(0.000001deg);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
overflow: hidden;
}
.youTubeContainer .video {
width: 100%;
height: 410px;
}
Le problème avec le code ci-dessus est que seuls certains coins sont arrondis. Que dois-je faire pour que les 4 coins soient arrondis quelle que soit la hauteur.
Voici le violon : https://jsfiddle.net/gb4aLxks/