fix: player fill window

This commit is contained in:
こけっち 2022-09-16 19:37:13 +09:00 committed by sim1222
parent fcc51ad5ab
commit 1e3547f644
2 changed files with 17 additions and 12 deletions

View File

@ -141,4 +141,7 @@ defineExpose({
min-height: 100%;
background: var(--bg);
}
.yrolvcoq:has(.fill) {
height: 100%;
}
</style>

View File

@ -1,15 +1,13 @@
<template>
<MkStickyContainer>
<div class="poamfof">
<div class="poamfof fill">
<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="player.url" class="player">
<iframe v-if="!fetching" :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="'100%'" :heigth="player.height || 500" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
<iframe v-if="!fetching" :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
</div>
</transition>
<MkLoading v-if="fetching" />
<MkError v-else-if="!player.url" @retry="fetch()" />
</div>
</MkStickyContainer>
</template>
<script lang="ts" setup>
@ -62,11 +60,15 @@ console.log(await player.url);
</script>
<style lang="scss">
.fill {
height: 100%;
}
.player {
position: relative;
width: 100%;
height: 100%;
>iframe {
height: 500px;
height: 100%;
left: 0;
position: absolute;
top: 0;