Question 245718 in Html Question posted in
Some basic documentation can be found here.

Html – Responsive Vimeo DIV Embed to 80% Width on Page with Scrolling

How can I make Vimeo’s responsive video embed code fit within a container div set to 80% width? Despite my attempts, I have been unable to adjust the sizing to fit my needs. I am looking for a solution that will allow the video to respond well on all devices, including desktops, HDTVs, and mobile devices. Currently, the code sizes the video to 100%, but I want to maintain its responsiveness while placing it within a container div. Any suggestions?

<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/#####?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;" ></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

I found another article see responsive vimeo

When I tried this technique however it still places the entire video full width on desktop, it does not reduce the width at all. The responsive container does not have enough room for a button below the video. Here’s the code from the above article that claims to solve this problem:

.video
{
  position: relative;
  padding: 56.25% 0 0 0;
}
.video iframe
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 992px)
{
  .video iframe
  {
    width: 50%;
  }
}

<div class="video">
  <iframe src="https://player.vimeo.com/video/#?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen title="Neck Flexion Test">
  </iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>

I tried one more thing: to place another tag outside of the container and set that tag to 80% of the width of the screen, but when I did this, it placed the button and all the text below it BEHIND the main video, which is unusable.

When I enclose the video inside of another container instead such as:

<div style="
                position: absolute;
                height: 80%; 
                width: 80%; 
                top: 10%; 
                left: 10%; 
">

### above vimeo code 

</div>

So I’m stuck… at the moment, I do not have a solution to place the video at 80% of screen width with a button below it. Thanks in advance for your help.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to parchambault for pointing in the right direction. This is the final code that works perfectly.

    <center><div style="position:relative; width:80%;">

<!-- your vimeo responsive embed code -->

</div></center>

    This way the video is also centered on the page.


  2. 0

    You have used position:absolute ! this will remove the div from the natural flow of the page!

    try to use this in place:

    <div style="position:relative; width:80%; margin:10% auto 0;">
... your vimeo responsive embed code...
</div>

    This should work perfectly like this sample: https://jsfiddle.net/gp1jo6Lt/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search