html – Vimeo iframe is not displayed at the top of the div-ThrowExceptions

Exception or error:

I am trying to display Vimeo iframe responsive to the screen size.

I wrote the following

.wrapper {
  display: flex;
  flex-wrap: wrap;
  min-height: 300px;
  border: 1px solid black;
}

.player {
  flex: 0 0 66.667%;
  max-width: 67%;
}

.lessons {
  flex: 0 0 33.33%;
  max-width: 33.33%;
  border: 1px solid black;
}
<div>
  Title
</div>
<div class="wrapper">
  <div class="player">
    <iframe src="https://player.vimeo.com/video/261210430?title=0&byline=0&portrait=0" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
  </div>
  <div class="lessons">
    Lessons
  </div>
</div>

I want to have a box that captures 2/3 of the width and the other box for the playlist to capture the rest. This doesn’t need to be accurate – but the idea is to have a player and a playlist, and the video iframe should start at top 0 of the div.

But as you can see in https://jsfiddle.net/zv6Lgaq7/1/ the video doesn’t start at top 0 and capture the full size of the div.

What am I doing wrong?

How to solve:

Here is how with js

function updater() {
  fetch('https://vimeo.com/api/oembed.json?url=https://player.vimeo.com/video/261210430', {method: 'GET'})
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    const pw = document.getElementById('iframe').offsetWidth
    const h = data.height*pw/data.width

    document.getElementById('player').style.height = h+'px'
  });
}

updater()

https://jsfiddle.net/j70kquLo/

Leave a Reply

Your email address will not be published. Required fields are marked *