web-dev-qa-db-fra.com

Supprimer les bordures noires sur un fichier d'image créé en utilisant CSS?

J'essaie de trouver un moyen de masquer les bandes noires en haut et en bas d'une vidéo Vimeo. J'ai pensé qu'il pourrait y avoir un moyen de les couvrir avec CSS.

Je voulais fondamentalement réaliser ce que cette personne voulait réaliser avec une image dans le lien ci-dessous, sauf que je voulais le faire avec une vidéo intégrée tout en la gardant repsonsive.

Suppression des bordures noires 4: 3 sur les miniatures youtube

Merci beaucoup.

HTML

<section class="d5-d13 c5-c13 b5-b13 a5-a13 video">

   <div class='embed-container'>
      <iframe src='http://player.vimeo.com/video/69252713' frameborder='0'
      webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
   </div>

</section>

CSS

.embed-container { 
position: relative; 
padding-bottom: 56.25%; 
padding-top: 30px; 
height: 0; 
overflow: hidden; 
max-width: 100%; 
height: auto; 
}

.embed-container iframe, .embed-container object, .embed-container embed { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%;
}
cssiframevideovimeo
6
user2498890

Pour votre cas d'utilisation, je ne pense pas que vous pourrez utiliser uniquement les CSS.

Habituellement, nous ajoutons des options Letterboxing ou Boxing Boxing autour des iframes vidéo pour conserver la hauteur et la largeur à un certain rapport de présentation. Mais dans ce cas, les bordures noires seraient simplement aussi simples qu’un arrière-plan CSS.

Pour que tout reste réactif, définissez la hauteur sur quelque chose comme étant égal à zéro (comme vous l'avez fait) et utilisez le hack de remplissage pour conserver le rapport de format de la vidéo (dans ce cas, une vidéo 16: 9; 9/16 * 100 = 56,25% ). Ce nombre correspondrait à votre valeur de remplissage supérieur ou inférieur. Étant donné que le remplissage est mesuré en pourcentage, le rembourrage est mis à l'échelle en fonction de la largeur, en conservant le rapport correct, quelle que soit la largeur de la vidéo.

Dans votre cas, cette vidéo contient en fait le letterboxing dans la vidéo que vous pouvez voir à partir de la source de la balise video dans l'iframe. Je ne sais pas pourquoi vous avez le padding-top:30 mais cela rend les bordures noires encore plus grandes. Vous aurez besoin de pirater encore plus votre situation à cause de la boîte aux lettres intégrée. J'ai mis en place une démo jsfiddle ici qui inclut quelques commentaires mais il utilise JS pour réaliser ce que vous recherchez.

Le concept du code est le suivant:

  • Vous souhaitez que le conteneur externe découpe le bas et le haut de la vidéo. En supposant que vous vouliez que la vidéo soit réactive et recadrée, vous devez toujours avoir la vidéo réelle plus grande que le conteneur externe qui la masque.
  • La vidéo doit être augmentée par rapport à sa largeur par rapport à l'épaisseur du bord supérieur
  • Vous voudrez peut-être réduire un peu la hauteur du conteneur externe pour compenser la marge supérieure négative tout en masquant la partie inférieure de la vidéo.

Personnellement, je n'aime pas faire des opérations DOM coûteuses sur le redimensionnement, ce qui est peut-être la raison pour laquelle vous avez demandé uniquement du CSS, mais FWIW, vous avez la démo.

Idéalement, votre meilleure option serait de ré-enregistrer la vidéo sans la boîte aux lettres, de sorte que tout ce dont vous auriez besoin est le hack de remplissage.

8
okcoker

Coupez le 1px de tous les bords avec CSS:

.embed-container { 
    position: relative; 
    padding-bottom: 43%;        /* Aspect ratio of the video */
    height: 0; 
    overflow: hidden; 
    max-width: 100%;
} 

.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
    position: absolute; 
    top: -1px; 
    left: -1px;
    width: calc(100% + 2px); 
    height: calc(100% + 2px);
}
5
matude

HTML:

<div class="js-video [vimeo, widescreen]">
  [video html goes here]
</div>

CSS:

.js-video {
  height: 0;
  padding-top: 25px;
  padding-bottom: 67.5%;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}

.js-video.widescreen {
  padding-bottom: 57.25%;
}

.js-video.vimeo {
  padding-top: 0;
}

.js-video embed, .js-video iframe, .js-video object, .js-video video {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

Vous trouverez plus de détails ici

2
Alex Z

J'ai créé une solution à ce problème en utilisant une partie de ce post de github. Suppression des barres noires. Cela ne change pas la couleur de fond de vimeo, mais le cache simplement dans la fenêtre.

https://github.com/davatron5000/FitVids.js/issues/130

#myid {
  height: 112.6%;
}

Toutefois, si vous ajoutez une largeur à l'aide de CSS "vw" (largeur de la fenêtre d'affichage), la taille sera cohérente sur tout moniteur/périphérique sans afficher l'arrière-plan noir. J'ai ajouté une marge pour que l'iframe reste centré dans le div une fois la largeur réduite.

#myvimeoiframeID {
  height: 112%;
  width: 80vw;
  margin: 0 15% auto;

}

Dans mon conteneur parent qui contient la vidéo, j'ai ajouté:

.embed-container {
   padding-bottom: 40.25%;
}

Cela semble assurer que la vidéo montre dans le div. Lorsque j'ai supprimé cette section, la vidéo disparaît mais vous pouvez toujours la lire ici. Donc, il y a quelque chose qui est assez impressionnant avec le rembourrage en bas: 40,25%;

J'ai changé le code iframe intégré dans vimeo pour qu'il ait une hauteur = "100%".

Vous pouvez donc ajouter une hauteur à l’iframe ou le faire en css. Afin de contrôler la hauteur par css, j'ai maintenu la hauteur de base dans l'iframe à 100% et tout ajustement de cette hauteur s'effectue par le biais du css.

0
Keeya Wang-Jones

J'ai eu le même problème et le problème était simple à résoudre. Mes vidéos ont été intégrées dans des pages Wordpress et des publications à l'aide de oEmbed. Wordpress encapsulait mes vidéos incorporées dans des balises <p>; les balises <p> avaient une certaine marge qui provoquait des bordures noires en haut et en bas de mes vidéos. J'ai utilisé le bit suivant de jQuery pour supprimer les balises <p> de mes vidéos incorporées:

$('.embed-container iframe').unwrap();
0
Glen

J'ai résolu ce problème en supprimant padding-top in .embed-container

rembourrage en bas: 56,25%; définit le rapport d’écran sur 16: 9 et supprime la barre noire en haut et en bas. haut de rembourrage ici va ajouter une zone de barre noire supplémentaire en arrière.

0
user1506075

Il suffit de mettre frameborder="0" parmi vos attributs.

0
H. Yang