使用Youtube API调用的iframe在Vue.js V-if命令后不会出现

Question

我在我的项目中使用Vue.Js。

我尝试使用Youtube Api调用iframe但iframe在“v-if”贡献的hide元素中使用此api。 iframe中的视频有效但视频不显示。只有声音但视频不显示。

我在这个链接尝试了解决方案，但我不能。

我的代码html代码：

<div id="egitim">
<div class="row">

    <div class="col-md-12" v-if="type=='list'">

         //...there another code block
    </div>
    <div class="col-md-12" v-if="type=='detail'" id="det">
        <div class="col-md-3 bosluk">
            <button class="btn btn-block btn-danger" type="button" v-on:click="goBack()">
                <i class="fa fa-arrow-left"></i>
                Geri Dön
            </button>
        </div>
        <div class="clearfix"></div>
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
            <li><a data-toggle="tab" href="#menu1" v-if="detail.Id>0">Personel</a></li>

        </ul>

        <div class="tab-content">
            <div id="home" class="tab-pane fade in active">


                <div class="col-md-12">
                    <div id="playerX">

                    </div>

                </div>


                <div class="clearfix"></div>

            </div>
        </div>
    </div>






</div>

和我的vue.js代码

var faturaList = Vue.component("egitim", {
template: "#egitim",
created: function () {
    this.getList();
   // $("#playerX").hide();
},
updated: function () {

},
data: function () {
    return {
        type: "list",
        list: [],
        detail: {},
        tutorialPersonel: [],
        personel: [],
        ilgiliSinavCaption: "",
        sinavModal: [],
        done: false

    }
},
props: {

},
filters: {

},
methods: {
    getList: function () {

    },
    getDetail(id) {
        var self = this;
        axios.post("./ws.asmx/GetTutorialDetail", { id: id }).then(function (r) {
            var d = JSON.parse(r.data.d);
            self.detail = d.Tutorial;
            self.tutorialPersonel = d.Personel;

           // $("#playerX").css("visibility","visible");
           // changeVideo(self.detail.ItemLink.split("youtu.be/")[1]);

            var player;
            var x = self.detail.ItemLink.split("youtu.be/")[1]
            player = new YT.Player('playerX', {
                height: '390',
                width: '640',
                videoId: x,
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                },

            });



            self.type = "detail";
            pWaitHide();

        }).catch(function (r) {
            pWaitHide();
            console.log(r);
            $.ms.hataMesaji("Bir hata ile karşılaşıldı");
        });
    }




}