Vimeo Videos Getting Chop-Off

Classic General
1

Hi All,

Anyone have a tip to fix the Vimeo vids getting truncated at the bottom on my site? (which obscures the “play” button?)

http://tinyurl.com/hudlroy

The strange thing is - they looked fine a couple of weeks ago, maybe the theme was updated?

Thanks!

2

Yes, that’s weird, but you’re not giving us much info. E.g.:

  • what theme are you using? (otherwise how can we help you know if it’s been updated)
  • how did you place the Vimeos: embed code, a certain stack, other?

At any rate this should not be happening, but a bit more info will help us to help you.

3

Hi Mathew,

Thanks for your reply.

  • the theme is called “Monotyped”.

  • here’s the Vimeo embed code I used for one of the videos:

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://player.vimeo.com/video/28336852' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

Thanks for taking a look,
Micah

4

Micah,

OK, that helps. Unfortunately I use RapidWeaver by not Typed. With the theme I use on RapidWeaver I don’t need to enter anything besides the regular Vimeo embed code. It looks like you’ve added a lot of extras: style specification and a div class of “embed container”. So I have 2 questions:

  • the style options seem to be entered to make the whole video responsive. Does Typed not offer off-the-shelf responsive embeds?
  • Does Typed require the embed-container div class? (This is probably related to the first question.)
  • Have you tried just using the regular embed code (starting with iframe and ending with iframe) without all the extras? If that works then nothing else to do.

Typed may work differently from RapidWeaver, but I would pretty much expect native responsiveness for videos with Typed.

5

Mathew,

Great suggestions; I’ll test these out when I have a moment - thanks for the tips.

Happy Holidays!

6

Hi Mathew,

Thanks again for your input’ to my knowledge (and this depends on the theme one is using) RealMac doesn’t make each Typed.com theme have automatic responsive video embeds.

Nevertheless, I took your advice and simplified the Vimeo code (using the originals from Vimeo) and kept the static “500 px” width (instead of trying to make them responsive) and they look great now.

Thanks Mathew!