Как разрешить flex в Vuetify, чтобы исключить заголовок при вертикальном сжатии видео - PullRequest
Новая
       57

Как разрешить flex в Vuetify, чтобы исключить заголовок при вертикальном сжатии видео

0 голосов
/ 02 мая 2020

Я пытаюсь установить ограничение <video> на доступную область в браузере. Это в основном работает - видео растет и сжимается как по горизонтали, так и по вертикали, когда окно изменяется. Однако, когда высота меньше естественной высоты видео, расстояние между флексами включает высоту <div> прямо над ним:

enter image description here

См. Эту скрипку:

https://jsfiddle.net/CodeVirtue/z26tc7Ld/47/

Уменьшите визуализированный кадр так, чтобы он уменьшал изображение по вертикали. Обратите внимание, что полоса прокрутки появляется только для высоты div прямо над ним, прежде чем <video> также начнет уменьшаться. Когда область прокрутки равна высоте заголовка, область прокрутки больше не увеличивается. Я не могу найти способ предотвратить появление этой полосы прокрутки.

Для записи я использую vue -core-video-player: https://github.com/core-player/vue-core-video-player Определения классов vid -container и vid-video вносятся этим компонентом, а также <div>, обертывающим <video>. Тем не менее, я могу легко добавить другие классы для вставленного контейнера <div>.

Вот код из JSFiddle: 

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">
<div id="app">
  <v-app>
    <v-card class="d-flex flex-column outerCard">
      <v-card class="d-flex flex-row pa-1 justify-space-between headerCard">
        <div class="font-weight-bold text-truncate my-auto">Abc</div>
        <div class="font-weight-bold px-2 text-truncate my-auto">Def</div>
      </v-card>
      <div class="flex-grow-1 vid-container">
        <video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" class="vid-video" controls></video>
      </div>
    </v-card>
  </v-app>
</div>

#app {
  background-color: red !important;
}
.outerCard {
  background-color: blue !important;
  height: 100vh;
  max-height: 100vh;
}
.headerCard {
  background-color: yellow !important;
}
.vid-container {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: #000;
}
.vid-video {
  background-color: #000;
  width: 100%;
  height: 100%;
}

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: {
  },
  methods: {
  }
})

Спасибо!

...