VueJs: Youtube Video Iframe показывает предыдущий просмотр при загрузке

Question

Введение

Эй, я использую Vue для создания одностраничного приложения. Мой проект использует vuex для управления состоянием и vue -router для управления навигацией, и я использую firebase в качестве моего бэкэнда.

Context

Пока что сайт представляет собой простой список items.

Когда я нажимаю на элемент, vue -router меняет текущий вид на подробный вид (ExerciseView), которому передается идентификатор документа пожарного хранилища. Страница содержит описание и видео на YouTube. Описание пока пустое, но видео успешно загружается с YouTube.

Сайт по-прежнему действительно базовый c, также на уровне сложности кода , а все остальное работает отлично.

Проблема

При загрузке подробной страницы все работает нормально, и у меня нет ошибки ни в консоли браузера, ни npm. Однако моя проблема заключается в том, что во время загрузки YouTube Iframe показывается предыдущий контент для просмотра.

Позвольте мне пояснить: я нажимаю на подробный вид в главном представлении, vue - роутер изменяет текущий маршрут к странице подробного упражнения, страница загружает компонент YoutubeVideo и, пока iframe загружает URL-адрес (это происходит после хука жизненного цикла mount (), перед монтированием все становится белым), иногда я вижу предыдущий вид (поэтому я вижу и могу взаимодействовать с предыдущим видом).

1: до загрузки страницы, сразу после метода mount ()

2: в то время как iframe загружается (он не должен отображать предыдущую страницу)

3: После успешной загрузки iframe.

Странно то, что если я полностью удаляю iframe YouTube со страницы, все работает отлично, поэтому я делаю не думаю, что это / это только проблема на моей странице Электронная структура.

Код

Шаблон Youtube видео

<template>
    <iframe width="889" height="500" :src="embeddedUrl" allow="autohide; modestbranding; encrypted-media; picture-in-picture" allowfullscreen />
</template>

Подробное упражнение Просмотр

<template>
    <div class="text-center">
        <ExerciseDescription :description="description" />

        <div class="video-container">
            <YoutubeVideo :videoLink="videoLink"/>
        </div>
    </div>
</template>

<script>
    import YoutubeVideo from "../components/exercise/YoutubeVideo";
    import { firestore } from "../firebase";
    import ExerciseDescription from "../components/exercise/ExerciseDescription";

    export default {
        name: "Exercise",
        components: {
            ExerciseDescription,
            YoutubeVideo
        },
        data() {
            return {
                docId: this.$route.params.id,
                title: "",
                videoLink: null,
                description: "",
            }
        },
        beforeCreate() {
            this.$store.dispatch('setNavbarTitle', null)
        },
        created() {
            firestore
                .collection('exercises')
                .doc(this.docId)
                .get()
                .then((exercise) => {
                    // name, video, description
                    const doc = exercise.data();

                    this.videoLink = doc.video;
                    this.description = doc.description;

                    this.$store.dispatch('setNavbarTitle', doc.name)
                });
        },
        destroyed() {
            this.$store.dispatch('setNavbarTitle', null)
        }
    }
</script>

<style scoped>
    .video-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px; height: 0; overflow: hidden;
    }

    .video-container iframe, .video-container object, .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>

Маршруты:

{
    path: '/',
    name: 'Today',
    component: Home
},
{
    path: '/login',
    name: 'Login',
    component: Login
},
{
    path: '/profile',
    name: 'Profile',
    component: Profile
},
{
    path: '/library',
    name: 'Library',
    component: Library
},
{
    path: '/exercise/:id',
    name: 'Exercise',
    component: Exercise
}