Making an embedded Vimeo video responsive?

  • 26 March 2018
  • 8 replies
  • 443 views
J

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!

8 replies

Hristian
Userlevel 7
Badge +3

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

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
J

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.

S

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

J

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.

S

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.

Kyle.C
Userlevel 5

@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!

Fernando_Jimenez

I solved the problem, here is the example, i had to put the iframe into a div container and then give it the 100% of the parent div container size. Basically when i want to resize ,i resize the container, not the iframe

<style>
.cont-video {
    height: calc(100vh - 100px);
    width: 100%;
}

iframe {
    width: 100%;
    height: 100%;
}
</style>
    <div class="cont-video">
       <iframe src="https://player.vimeo.com/video/439610302?autoplay=1" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
    </div>
Etienne_PETIT

Bonjour, merci pour le conteneur. Il marche très bien mais il vient ensuite perturber l’affichage en hauteur de mon autre iframe airtable sur ma page. Comment faire ?

Reply


Terms & ConditionsCookie settings