L'ajout de border-radius pour l'embarqué vidéo YouTube

Veuillez voir ce violon. Avis instantanément avant de charger le border-radius fonctionne très bien. Quelques millisecondes plus tard, les coins arrondis disparaître.

Comment puis-je ajouter des coins arrondis à intégré des vidéos de YouTube?

Je suis sûr qu'il a quelque chose à voir avec le Flash ne se soucient pas de votre CSS coins arrondis. Je suis curieux de savoir si cela fonctionnerait avec l'élément HTML5 video ou pas.
Si la vidéo elle-même avoir des coins arrondis (pas impossible) ou un noir conteneur avec des coins arrondis travail?
J'ai eu ce travail lors de notre premier site lancé. Coins arrondis fonctionnent très bien avec les vidéos de YouTube -- jusqu'à récemment, peut-être il y a quelques semaines. Soudain, les vidéos YouTube sont de se comporter, comment décrit-arrondi conteneur montre tout d'abord, la place de la vidéo s'affiche au-dessus d'elle. En même temps, ce problème est apparu, nos vidéos sur YouTube cessé de montrant dans Firefox. Enlever les border-radius code rend les vidéos montrent bien dans Firefox. Bizarre la façon dont il l'habitude de travailler, mais n'est pas maintenant. N'ont pas apporté de modifications à mes pages web ou une feuille de style. Du mieux que je peux comprendre, il a quelque chose à voir avec un changement que Yo

OriginalL'auteur Randomblue | 2011-10-18

css youtube

15

Il vous suffit de définir vos styles de bordure:
```
border:20px solid #000;
```
http://jsfiddle.net/jalbertbowdenii/AkPXj/20/

C'est de la triche, mec.
Dans le jeu du développement web, il n'y a pas de triche. Si une technique rendements des résultats souhaités son bon aller, à mon avis. Je veux dire, si la méthode suce, ne serait d'utiliser ;--)
Le "résultat souhaité" n'était pas possible..
aussi avez-vous de laisser de côté les règles du jeu dans votre question? vouliez-vous dire résoudre mon rayon des frontières problème lors de la lecture de nice? peu importe, vous aurez à définir jouer gentil, parce que clairement, nos règles de webdev diffèrent, donc je suis sûr que nos règles de jeu agréable diffèrent. vous avez posé une question. j'ai pris le temps de sortir de ma journée à le résoudre. vous verrez ce que ne jouant pas "gentil". je vois cela comme un honnête enquête sur juste ridicule c'est.
Il fonctionne o.O !!!

OriginalL'auteur
5

Afin de créer le look de coins arrondis, vous devez faire quatre superposition divs qui ressemblent à un angle arrondi et de se positionner à chaque coin de rue. Pas une solution élégante à tous, mais c'est la seule façon de créer cet effet.

Pourquoi réclamez-vous c'est la seule voie possible?
Conteneurs avec un border-radius n'est pas systématiquement des cultures le contenu à l'intérieur, le contenu Flash en particulier. Si vous deviez créer une seule div superposition, j'imagine qu'il serait impossible de cliquer sur les contrôles dans la vidéo, donc c'est pourquoi je pense que quatre positionnement absolu coin divs sont la seule façon de le faire.

OriginalL'auteur

Un exemple pour obtenir des coins arrondis sur les vidéos de youtube ou d'autre chose, comme des images ou des balises 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>

OriginalL'auteur

3

Au premier abord, le navigateur traite comme n'importe quelle autre élément de bloc et applique le rayon des frontières. Ensuite, l'objet flash finit de se charger et s'en va juste sur le dessus, comme il n'existe aucun moyen d'utiliser border radius sur un objet flash, ils disparaissent.

Ok, merci pour le heads up. Pensez-vous qu'il est un moyen de contourner cela?
J'en doute car c'est un plugin, donc il peut faire ce qu'il aime & CSS3 n'est pas encore sorti donc ce n'est pas compatible avec tout. Vous pourriez faire un div wrapper autour de l'objet qui a arrondi les angles, mais ce serait d'augmenter la taille globale. ou vous pourriez mettre quatre images à chaque coin sur le dessus de l'objet? Son pas de droite avant de placer les choses sur le dessus des objets flash.

OriginalL'auteur
3

Si vous pouvez, essayez un direct embed/objet (le mieux avec swfobject ou quelque chose) et wmode = transparent ou wmode opaque (de préférence)

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

OriginalL'auteur
2

Malheureusement, arrondir les coins de Flash intégré de vidéos tels que YouTube et Vimeo est assez difficile en raison des différences entre les navigateurs plus anciens.

Si tous les utilisateurs finaux sont en cours d'exécution d'un navigateur qui prend en charge HTML5, puis il suffit d'ajouter player=html5 à la iframe adresse: http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&player=html5. Ce sera la force de leur navigateur pour charger la version HTML5 de la vidéo, et la border-radius suffira.

Si certains de vos utilisateurs' navigateurs ne pas prise en charge de HTML5, puis les choses commencent à mal tourner.

Votre prochaine solution plus élégante serait quelque chose comme ce que Ivijan-Stefan suggéré, qui est à l'adresse de chaque navigateur individuellement et de jeter le !important tag sur chaque élément, éventuellement complétée par l'ajout de wmode=transparent à la iframe adresse: http://www.youtube.com/embed/QKh1Rv0PlOQ?rel=0&wmode=transparent.

Cela va vous acheter un supplément de quelques versions du navigateur de la compatibilité, de sorte que vous pourriez être en mesure de les appeler il se ferme à ce point.

Pour ceux d'entre nous qui en ont besoin pour soutenir une variété d'anciens navigateurs (Internet Explorer 6, anyone?), cependant, la seule constamment moyen fiable de le faire est de faire une image qui ressemble à une courbe de coin, et à l'aide de copies de cette image pour couvrir chacun des coins de la vidéo. (Cela nécessite également l' wmode=transparent truc que j'ai décrit ci-dessus, depuis certains des pires délinquants dans le cas contraire, l'affichage de l'angle images sous la vidéo!)

Voici un exemple de cette technique appliquée à un iframeintégré vidéo YouTube: http://jsfiddle.net/skywalkar/uyfR6/ (exemple rayon = 20px)

Remarque: Si vous faites le coin des superpositions de trop grande taille (plus de ~20px), puis ils vont couvrir le joueur contrôle!

Afin de minimiser les effets de ce problème, vous pouvez essayer de couper les coins en tournant les images de 45 degrés. Cela nécessite un ensemble différent de superpositions et certains l'utilisation créative des marges, mais peuvent être en vaut la peine si vous avez besoin d'un grand rayon de bec: http://jsfiddle.net/skywalkar/BPnLh/ (exemple rayon = 30px)

OriginalL'auteur
0

Il est seulement possible avec HTML5 mode activé pour que le lecteur youtube.

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

Quel navigateur utilisez-vous tester? Cela ne fonctionne pas avec IE avant la 9e, en raison de l'absence de CSS3 et HTML5 soutien.
Supposons que l'on ne sera pas facile et stable d'autre solution que joignant l'iframe dans le bloc de l'élément de comme jsfiddle.net/3f9DB/3
Quand je lance la démo (FF7), j'obtiens le contenu Flash.

OriginalL'auteur
0

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

OriginalL'auteur

Voici un très pratique et utile "hack-solution" à ce problème difficile.

Juste d'intégrer l'iframe dans un "div" élément comme ceci:

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

puis ajouter le code css suivant dans 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 tout à fait une solution flexible, bien qu'il utilise une couche supplémentaire pour border-radius. Cette méthode est également compatible avec la plupart (tous) les navigateurs modernes. Espérons que cela a été utile.

OriginalL'auteur

Vous devez vous connecter pour publier un commentaire.