How To Use Custom Popup Video In Vue.Js

Use Vue.js custom popup feature in Vue JS and it’s easily customizable also, neither npm plugin nor jQuery.

 

Step 1: Components

<template>
    <div>
        <div class="container">
            <div 
                class="video-btn"
                v-on:click="isPopupMethod(isPopup)"
                style="cursor: pointer;"
            >
                <i class="flaticon-play"></i>
            </div>
        </div>

        <div 
            class="popup-video" 
            v-if="isPopup"
        >
            <div class="d-table">
                <div class="d-table-cell">
                    <div class="container">
                        <div 
                            class="popup-overlay-close"
                            v-on:click="isPopupMethod(isPopup)"
                        >
                            <div class="popup-overlay-close-line"></div>
                            <div class="popup-overlay-close-line"></div>
                        </div>
                        <div class="play-video">
                            <iframe class="responsive-iframe" src="https://www.youtube.com/embed/bk7McNUjWgw"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

Step 2: JS

<script>
export default {
    data (){
        return {
            isPopup: false
        }
    },
    methods: {
        isPopupMethod(isPopup){
            return this.isPopup = !isPopup
        },
    },
}
</script>

Step 3: SCSS

<style lang="scss" scoped>
.video-btn {
    width: 100px;
    height: 70px;
    font-size: 30px;
    z-index: 3;
    text-align: center;
    line-height: 70px;
    background-color: #ff0000;
    border-radius: 7px;
    color: #fff;
    position: relative;

    &::after, &::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
        bottom: 0;
        left: 0;
        border-radius: 7px;
        border: 1px solid var(--whiteColor);
    }
    &::before {
        animation: ripple 2s linear infinite;
    }
    &::after {
        animation: ripple 2s linear 1s infinite;
    }
    &:hover {
        background-color: var(--mainColor);
    }
}
.popup-video {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.60);

    .popup-overlay-close {
        position: absolute;
        top: 30px;
        right: 40px;
        width: 30px;
        height: 30px;
        z-index: 2;
        text-align: center;
        cursor: pointer;
        transition: all 0.9s ease-in-out 1.5s;

        .popup-overlay-close-line {
            width: 100%;
            height: 3px;
            float: left;
            margin-bottom: 5px;
            background-color: var(--whiteColor);
            transition: all 500ms ease;

            &:nth-child(1) {
                transform: rotate(45deg);
            }
            &:nth-child(2) {
                margin-top: -7px;
                transform: rotate(-45deg);
            }
        }
        &:hover {
            .popup-overlay-close-line {
                background: var(--mainColor);
                transform: rotate(180deg);
            }
        }
    }
    .play-video {
        text-align: center;
        iframe {
            width: 1000px;
            height: 550px;
            border: none !important;
        }
    }
}
</style>