play list and video player

YoutubePlayList.vue

<template>
    <div class="row" id="youtube">
        <div class="col-md-8 pr-md-0 bg-night pt-2 pb-2">
            <div v-if="loading" class="loading w-100" height="400">
                <div></div>
            </div>
            <iframe @load="loading=false" width="100%" height="400" :src="activeUrl" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
        </div>
        <div class="col-md-4 pl-md-0 bg-night pt-2 pb-2">
            <v-bar wrapper="wrapper"
                vBar="vbar"
                vBarInternal=""
                hBar=""
                hBarInternal="">
                <a style="padding-bottom:0 !important;padding-right:0 !important;" v-for="item in data" :key="item.id" href="#" @click.prevent="setActive(item.id,item.url)">
                    <div class="pt-3 pb-3 hover d-flex pl-4" :class="[(item.id==activeId) ? 'active':'']">
                        <div class="img">
                            <div class="card-sm tw-bg-cover tw-bg-center" :style="background(item.image_url)"></div>
                        </div>
                        <div class="pl-4">                    
                            <span class="text-white font-size-12"> Most Amazing Concept Ca</span>
                            <div class="td_video_time">06:02</div>
                        </div>
                    </div>
                </a>
            </v-bar>
        </div>
    </div>
</template>
<script>

import VBar from 'v-bar';

export default {
    data(){
        return {
            'activeId':1,
            'loading':true,
            'activeUrl':'https://www.youtube.com/embed/kHfxo6Sf6LY',
            'data':[
                {
                    'id':1,
                    'title':'Most Amazing Concept Ca',
                    'created_at':'7 Minutes Ago',
                    'image_url':'img/news/news24.jpg',
                    'url':'https://www.youtube.com/embed/kHfxo6Sf6LY'
                },
                {
                    'id':2,
                    'title':'Laravel is the game changer',
                    'created_at':'7 Minutes Ago',
                    'image_url':'img/news/news24.jpg',
                    'url':'https://www.youtube.com/embed/1gukvtH_a3I'
                },
                {
                    'id':3,
                    'title':'Laravel is the game changer',
                    'created_at':'7 Minutes Ago',
                    'image_url':'img/news/news24.jpg',
                    'url':'https://www.youtube.com/embed/1gukvtH_a3I'
                },
                {
                    'id':4,
                    'title':'Laravel is the game changer',
                    'created_at':'7 Minutes Ago',
                    'image_url':'img/news/news24.jpg',
                    'url':'https://www.youtube.com/embed/1gukvtH_a3I'
                },
                {
                    'id':5,
                    'title':'Laravel is the game changer',
                    'created_at':'7 Minutes Ago',
                    'image_url':'img/news/news24.jpg',
                    'url':'https://www.youtube.com/embed/1gukvtH_a3I'
                }
            ]
        }
    },
    methods:{
        setActive:function(id,url){
            this.activeId=id;
            this.loading = true;
            this.activeUrl = url;
        },
        background:function(url){
            return 'background:url("'+url+'")';
        }
    },
    components: { VBar }
}
</script>

<style>
.bg-night{
    background-color: #333;
}
.card-sm{
    height: 55px;
    width: 100px;
}
#youtube .active {
    border-left: 3px red solid;
    background: rgb(80, 80, 80);
}
#youtube .active .img{
    margin-left: -3px;
}
.wrapper {
    height: 100%;
    width: 100%;
}
.vbar{
    width: 8px !important;
    display: inherit !important;
    background: #919191 !important;
}
.td_video_time {
    font-family: open sans,arial,sans-serif;
    font-size: 10px;
    font-style: italic;
    color: #777;
    line-height: 13px;
}
.hover:hover{
    background: #404040 !important;
}

.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(51, 51, 51, 0.5);
}
  .loading div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 51px;
    height: 51px;
    margin: 6px;
    border: 6px solid #fff;
    border-radius: 50%;
    animation: loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
  }
  .loading div:nth-child(1) {
    animation-delay: -0.45s;
  }
  .loading div:nth-child(2) {
    animation-delay: -0.3s;
  }
  .loading div:nth-child(3) {
    animation-delay: -0.15s;
  }
  @keyframes loading {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

</style>