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 class="wrapper">
  <div class="player">
    <iframe src="" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
  <div class="lessons">

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 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('', {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'


Leave a Reply

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