Странное поведение встроенного видео и v-if

Question

Я создавал всплывающее / наложенное видео для проекта, в котором видео можно было просматривать в большом или маленьком проигрывателе, и я столкнулся с этим очень странным поведением.Когда видео большое, я хотел, чтобы заголовок и описание показывались, а когда маленькие, то скрывались.Поэтому я просто добавил директиву v-if к заголовку и описанию и переключил их, основываясь на том, показывалось ли видео в большом состоянии или нет.

Странное поведение заключается в том, что при воспроизведении встроенного видео iframeпринудительно перезагружается при изменении размера видео, , но только когда , перед iframe следуют заголовок и описание с директивами v-if.Если вы вообще измените это расположение, перемещая один элемент в другое место или окружив его элементом div, поведение останавливается.

Кто-нибудь может понять, почему это происходит или это ошибка?

Я воспроизвел поведение в ссылках jfiddle ниже:

https://jsfiddle.net/skribe/3w8cujvp/2/(работает неправильно)

https://jsfiddle.net/skribe/uj97oh0k/1/ (работает должным образом)

Скрипт:

  data:{
    vidLarge: true,
    vidWidth: window.innerWidth * .45,
    vidHeight: (window.innerWidth * .45 * 9) / 16,
  },
  methods:{
    toggleLarge(){
         this.vidLarge = !this.vidLarge;
       this.vidWidth = this.vidLarge ? window.innerWidth * .45 : 150;
       this.vidHeight = (this.vidWidth * 9) /16;
    }
   },

Шаблон: (со странным поведением)

  <div>
    <div class="wrapper">
      <h3 v-if="vidLarge">Video 1</h3>
      <iframe :width="vidWidth" :height="vidHeight" src="https://www.youtube.com/embed/VqKjr4I4Fdo"></iframe>
      <p v-if="vidLarge">A Vue Tutorial</p>
    </div>  
    <button @click="toggleLarge">Toggle Size </button>
  </div>

Шаблон: (работает правильно)

  <div>
    <div class="wrapper">
      <h3 v-if="vidLarge">Video 1</h3>
      <p v-if="vidLarge">A Vue Tutorial</p> <!-- moved above iframe -->
      <iframe :width="vidWidth" :height="vidHeight" src="https://www.youtube.com/embed/VqKjr4I4Fdo"></iframe>

    </div>  
    <button @click="toggleLarge">Toggle Size </button>
  </div>

   or.....

  <div>
    <div class="wrapper">
      <h3 v-if="vidLarge">Video 1</h3>
      <iframe :width="vidWidth" :height="vidHeight" src="https://www.youtube.com/embed/VqKjr4I4Fdo"></iframe>
      <div> <!-- separate from iframe with another element -->
        <p v-if="vidLarge">A Vue Tutorial</p>
      </div>
    </div>  
    <button @click="toggleLarge">Toggle Size </button>
  </div>