0

I'm trying to keep the ratio at 16:9 but not all of my videos are 1920x1080. Two are - 1920 x 1012 and 1000 x 416. When I try to embed them in an html file- the images get distorted (either additional black frame space or cut off).

peterh
  • 11,875
  • 18
  • 85
  • 108
Lauren
  • 11
  • 1
  • 1
  • 2
    Welcome to SO. Please have a look at [the tour](http://stackoverflow.com/tour). You may also want to check [How to ask a good question](http://stackoverflow.com/help/how-to-ask), and how to create a [Minimal, Complete and Verifiable example](http://stackoverflow.com/help/mcve). Post the code you have tried and the errors you have received. Be as specific as possible as it will lead to better answers. You can use this [question checklist](http://meta.stackoverflow.com/questions/260648/stack-overflow-question-checklist) in order to be sure your question is not missing anything important. – José Luis Dec 06 '16 at 23:01
  • Do you see? It is now a question. Your version was crap. – peterh Dec 10 '16 at 06:31

1 Answers1

0

If some of your source videos aren't 16:9 aspect ratio, but you want the size of your embedded Vimeo player to maintain a 16:9 ratio, you will see either the letterbox effect or some distortion.

You can change the width and height attributes of the iframe in the embed code to size the player itself to meet your needs, but from playing around with different parameters, it appears that Vimeo will preserve the original dimensions and add black bars where appropriate.

lscherber
  • 1
  • 1
  • hi thanks for responding. so if i go by iframe coding only- and get rid of the 16:9 aspect ratio code.. my vimeo embeds dont fill the full screen- for example: http://ryanstaake.com/ – Lauren Dec 06 '16 at 20:47
  • @Lauren Are you looking to always fill the entire width of the screen? If so, you can change the width attribute to `width="100%`. – lscherber Dec 06 '16 at 20:53
  • for the ryanstaake.com example i used: `code` } .inner iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } in my css but it still doesn't fit the mobile/web browser width :/ – Lauren Dec 06 '16 at 20:57
  • Lauren, you might want to check out Embed Responsively: http://embedresponsively.com/ Also, I suggest reducing the number of embeds you have on a single page, as devices and browsers with limited memory will have trouble loading the page. – Tommy Penner Dec 08 '16 at 15:34