2 votes

4 coins arrondis sur l'iframe vidéo de YouTube

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/

0voto

Andy Hoffman Points 4142

Régler le .youTubeContainer a inline-flex pour supprimer le petit espace blanc qui empêche les coins de se coller correctement.

enter image description here

enter image description here

jsFiddle

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X