0

I use Vue.Js in my project.

I tried Iframe invoked with Youtube Api but iframe that use this api in a hide element from " v-if " contribution . Video in iframe worked but vide is not show.Just have a sound but video is not show.

I tried solution that at this links but I can not.

StackOverFlow Solutions 1

My Code html code:

<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>

and my vue.js code

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ı");
        });
    }




}
huseyinokumus
  • 23
  • 8

1 Answers1

0

After doing some in-depth research, I realize that the event is caused entirely by a mistake of the v-if command. If you use "v-show" instead of "v-if", you'll see that $ ("# anyElement"). css ("visibility", "visible") in jquery is the counterpart. Thank you for all

huseyinokumus
  • 23
  • 8