Vue.js rendering issue, responsive iframes - iframe

Question

I am trying to pull some videos from Vimeo with Vue and the component markup is this:
<div class="vimeo-data">
<div class="video-wrap" v-for="video in videos" v-bind:key="video.name">
<h2>{{video.name}}</h2>
<figure v-html="video.embed.html" class="video-container"></figure>
</div>
</div>
In my understanding, this should generate a HTML similar to this (which it does).
<div class="vimeo-data">
<div class="video-wrap">
<h2>The video name</h2>
<figure v-html="video.embed.html" class="video-container">
<iframe src="https://player.vimeo.com/video/249865075?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0" width="1920" height="810" frameborder="0" title="Academia Titi Aur - Macadam" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</figure>
</div>
<div class="video-wrap">
<h2>Another video name</h2>
<figure class="video-container">
<iframe allowFullScreen frameborder="0" width="100%" height="564" mozallowfullscreen src="https://player.vimeo.com/video/249865062" webkitAllowFullScreen></iframe>
</figure>
</div>
<div class="video-wrap" >
<h2>Some video name</h2>
<figure class="video-container">
<iframe src="https://player.vimeo.com/video/249226102?title=0&byline=0&portrait=0&badge=0&autopause=0&player_id=0" width="1920" height="1080" frameborder="0" title="6 PLIN intro" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</figure>
</div>
</div>
I made a test and created a static html page with what is being generated by Vue and although the css is the same (below) the videos in the static html are nice and responsive (https://jsfiddle.net/4q5Lyn97/) while the ones generated by Vue are not responsive, they seem cut - see the image below.
.vimeo-data {
position: relative;
top: 70px;
}
embed,
iframe,
object {
max-width: 100%;
}
.video-wrap {
padding-top: 2em;
max-width: 98%;
margin: 10px auto;
clear: both;
}
.video-container {
position: relative;
padding-bottom: 42.18%;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
What can be the cause of this behavior?