Making an embedded Vimeo video responsive?


#1

Is there any way to make an embedded Vimeo video responsive so that it automatically resizes based on the size of the browser window? I’ve tried using some CSS scripts but nothing seems to be working.

Thanks!


#2

Hi @jordan.eller,

The Vimeo embed code is not responsive by default.

You can find some guidance on how to make it responsive towards the bottom of this help article from Vimeo.

Best,
Hristian


#3

Thanks for the reply! I followed their instructions and generated a responsive embed code, but I get a “your code appears to be invalid” error when I attempt to save it.


#4

Having the same issue here. Did you find a fix?


#5

Unfortunately not. We even had our developers try to create a workaround, but even those failed. Here’s hoping Unbounce allows responsive Vimeos in future updates.


#6

I actually did very late last night. Have you seen the solution of using http://embedresponsively.com/ This works but you have to select HTML not Video as the block to pick in Unbounce, it won’t recognise it as Video and I was getting the error you were but pasting it in as HTML worked. Not as nice as I’d want but it’s better than seeing a square of a video.


#7

@jordan.eller @SupaPass

I’ve come across the similar issues in the past and ended up using the HTML option instead of the Video option in the builder. That embed responsively site seems pretty nice. As another option, below I’ve included much simpler iFrame code.

  1. Copy the iFrame share option from your Vimeo video.
  2. Add the Custom HTML box to your Unbounce page, and drag the corners to the size you need.
  3. Paste the Vimeo iFrame code into the HTML box in Unbounce.
  4. Edit the width and height values to say 100% (optional: remove the <p links, etc.)

Here is an example:

<iframe src=“https://player.vimeo.com/video/171813417” width=“100%” height=“100%” frameborder=“0” webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Hope that helps!