web-dev-qa-db-fra.com

Ajout d'un bord à la frontière pour la vidéo YouTube intégrée

S'il vous plaît voir ce violon . Notez immédiatement avant de charger le border-radius fonctionne bien. Quelques millisecondes plus tard, les coins arrondis disparaissent.

Comment puis-je ajouter des angles arrondis aux vidéos YouTube intégrées?

cssyoutube
15
Randomblue

Il vous suffit de définir vos styles de bordure:

border:20px solid #000;

http://jsfiddle.net/jalbertbowdenii/AkPXj/20/

15
albert

C'est très simple avec CSS3. Tout ce que vous manquez, c'est le z-index qui joue le mauvais flic. 

Regardez le code ci-dessous, j'ai enveloppé le lecteur dans un div, définir sa hauteur et sa largeur comme je le souhaite, définir le débordement sur hidden et z-index selon les besoins. Le rayon de la frontière fonctionne très bien!

.player {
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
  height: 320px;
  width: 480px;
}
<div class="player">
<iframe width="480" height="320" src="https://www.youtube.com/embed/aiegUzPX8Zc" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>

6
Sibidharan

Pour créer l'aspect des coins arrondis, vous devez créer quatre superpositions divname__s qui ressemblent à un coin arrondi et les positionner à chaque coin. Ce n’est pas une solution élégante, mais c’est le seul moyen de créer cet effet.

5
Nate B

Un exemple pour obtenir des angles arrondis sur des vidéos youtube ou autre, comme des iframes ou des tags img.

<div style="
width: 560px;
-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: 10px; 
-moz-border-radius: 10px;
border-radius: 10px; 
overflow: hidden; 
">
<iframe width="560" height="315" src="http://www.youtube.com/embed/ZM0e1m9T9HQ" frameborder="0">
</iframe>
</div>
4
dirkdigital

Si vous y êtes autorisé, essayez un objet incorporé/direct (idéal avec swfobject ou quelque chose) et wmode = transparent ou wmode opaque

http://jsfiddle.net/AkPXj/19/

3
yunzen

Au début, le navigateur le traite comme n'importe quel autre élément de bloc et applique le rayon de la bordure. Ensuite, l'objet flash termine le chargement et ne fait que passer par-dessus, car il n'y a aucun moyen d'utiliser le rayon de la frontière sur un objet flash;.

3
472084

Malheureusement, contourner les angles des vidéos Flash intégrées telles que YouTube et Vimeo est assez difficile en raison des différences entre les anciens navigateurs. 

Si tous vos utilisateurs exécutent un navigateur prenant en charge HTML5, ajoutez simplement player=html5 à l'adresse iframe comme suit: http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&player=html5. Cela forcera leur navigateur à charger la version HTML5 de la vidéo et le border-radius fonctionnera parfaitement.

Si certains des navigateurs de vos utilisateurs finaux not / prennent en charge HTML5, la situation commence à dégénérer. 

Votre prochaine solution la plus élégante ressemblera à la suggestion d'Ivijan-Stefan, qui consiste à adresser chaque navigateur individuellement et à placer la balise !important sur chaque élément, éventuellement complétée par l'ajout de wmode=transparent à l'adresse iframe de la manière suivante: http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&wmode=transparent. 

Cela vous permettra d’obtenir une compatibilité supplémentaire avec quelques versions de navigateur supplémentaires. Vous pourrez donc peut-être appeler le processus arrêté à ce stade.

Pour ceux d'entre nous qui doivent prendre en charge une variété de navigateurs hérités (Internet Explorer 6, qui que ce soit?), Toutefois, le seul moyen cohérent / de le faire consiste à créer une image qui ressemble à un coin incurvé. et en utilisant des copies de cette image pour couvrir chacun des coins de la vidéo. (Cela nécessite également le truc wmode=transparent que j'ai décrit ci-dessus, car certains des pires délinquants afficheront sinon les images de coin sous la vidéo!) 

Voici un exemple de cette technique appliquée à une iframe- vidéo YouTube incorporée: http://jsfiddle.net/skywalkar/uyfR6/ (exemple radius = 20px)

Remarque: Si vous créez des superpositions de coin trop grandes (supérieures à ~ 20 pixels), elles masqueront les commandes du lecteur!
Pour minimiser les effets de ce problème, vous pouvez couper les angles en faisant pivoter les images de 45 degrés. Cela nécessite un ensemble différent de superpositions et une utilisation créative des marges, mais cela peut valoir la peine si vous avez besoin de rayons de coin plus grands: http://jsfiddle.net/skywalkar/BPnLh/ (exemple, rayon = 30px)

2
RobotZombieLord

Ce n'est possible qu'avec le mode HTML5 activé pour le lecteur youtube.

Démo ici: http://jsfiddle.net/3f9DB/1/

0
user1012851

Vous pouvez envelopper l'iframe comme ceci: http://jsfiddle.net/xmarcos/D4sS7/

0
xmarcos

Voici une "solution de piratage" simple mais très pratique et utile à ce problème complexe.

Intégrez simplement votre iframe dans un élément "div" comme ceci:

  <div>
   <iframe allowfullscreen="" frameborder="0" height="445" player="html5"scrolling="no" src="https://www.youtube.com/embed/DCTwJJhQFy8"   width="780"></iframe>
  </div>

ajoutez ensuite le css suivant à votre code HTML:

 div {
   position: relative;
   display:inline-block;
   margin:200px;
}
div:before {
    content: '';
    position: absolute;
    z-index: 5000;
    display: block;
    top: -27px;
    left: -27px;
    right: -27px;
    bottom: -27px;
    background-color: transparent;
    pointer-events: none;
    border: 30px solid white;
    border-radius: 50px;
}][1]

C'est une solution assez flexible, bien qu'elle utilise une couche supplémentaire pour le rayon de la bordure. Cette méthode est également compatible avec la plupart des navigateurs modernes. J'espère que c'était utile. 

0
user6123836