Vue.js渲染问题，响应式iframe

Question

我试图用Vue从Vimeo中提取一些视频，组件标记是这样的：

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

根据我的理解，这应该生成类似于此的HTML（它确实如此）。

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

我做了一个测试并创建了一个静态html页面，其中包含Vue生成的内容，虽然css是相同的（下图），但静态html中的视频很好且反应灵敏（https://jsfiddle.net/4q5Lyn97/）而由Vue生成的没有响应，它们似乎被削减 - 见下图。

.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%;
 }

这种行为的原因是什么？