Play Button - Video

playButton.js

import gsap from "gsap"

/**
 * Pause video if is playing
 */
document.addEventListener("play", function (e) {
    const videos = document.getElementsByTagName("video")
    for (let i = 0, len = videos.length; i < len; i++) {
        if (videos[i] !== e.target) {
            videos[i].pause()
        }
    }
}, true)

window.addEventListener("load", () => {
    /**
     * Play button videos
     * @type {NodeListOf<Element>}
     */
    const $videos = document.querySelectorAll(".video")
    $videos.forEach(video => {
        const $playLink         = video.querySelector(".play")
        const $embedWrapper     = video.querySelector(".embed-responsive")
        const $embedWraperImage = video.querySelector(".thumb")

        if ($playLink) {
            $playLink.addEventListener("click", evt => {
                evt.preventDefault()

                const $idVideoVimeo   = video.getAttribute("data-vimeo-id")
                const $idVideoYouTube = video.getAttribute("data-youtube-id")
                const $urlVideoInline = video.getAttribute("data-video-url")

                const tlVideo = gsap.timeline()

                tlVideo
                    .to($playLink, {
                        autoAlpha: 0,
                        duration : .6,
                        y        : -100,
                        ease     : "back.in",
                    })
                    .to($embedWraperImage, {
                        autoAlpha : 0,
                        duration  : .6,
                        ease      : "power.inOut",
                        onComplete: () => {
                            // apply video embed
                            if ($idVideoVimeo !== null && $idVideoVimeo !== "") {
                                $embedWrapper.insertAdjacentHTML("afterbegin", `<iframe title="video" width="1280" height="720" src="https://player.vimeo.com/video/${$idVideoVimeo}?autoplay=1&loop=1" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>`)
                            } else if ($idVideoYouTube !== null && $idVideoYouTube !== "") {
                                $embedWrapper.insertAdjacentHTML("afterbegin", `<iframe title="video" width="1280" height="720" src="https://www.youtube.com/embed/${$idVideoYouTube}?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`)
                            } else if ($urlVideoInline !== null && $urlVideoInline !== "") {
                                $embedWrapper.insertAdjacentHTML("afterbegin", `<video width="1280" height="720"  controls autoplay playsinline><source src="${$urlVideoInline}" type="video/mp4"></video>`)
                            }
                        }
                    }, "-=.3")
            })
        }
    })
})

s-video.scss

.s-video {

    .wrapper-video {
        position : relative;
        width    : 100%;

        // 992
        @media (min-width : $tablet-portrait) {
            max-width    : 720px;
            margin-right : auto;
            margin-left  : auto;
        }

        // 1200
        @media (min-width : $notebook) {
            max-width : 930px;
        }
    }

    .wrapper-video .video-image {
        img {
            position : absolute;
            display  : none;

            // $tablet-portrait
            @media (min-width : $tablet-portrait) {
                display   : block;
                left      : 100%;
                bottom    : 0;
                max-width : 200px;
                transform : translate(-15%, 5%);
            }

            // $notebook
            @media (min-width : $notebook) {
                max-width : 280px;
            }

            // $desktop
            @media (min-width : $desktop) {
                max-width : 100%;
                transform : translate(-25%, 5%);
            }
        }
    }

    .action {
        margin-top : 20px;

        // $tablet
        @media (min-width : $tablet) {
            margin-top : 30px;
        }
    }
}

vdieo.scss

.video {
    position      : relative;
    border-radius : 10px;
    border        : 8px solid $success;
    overflow      : hidden;

    // $notebook
    @media (min-width : $notebook) {
        border-width : 10px;
    }

    .thumb {
        //border-radius : 10px;
    }

    .play {
        position        : absolute;
        top             : 0;
        right           : 0;
        bottom          : 0;
        left            : 0;
        display         : flex;
        align-items     : center;
        flex-flow       : column;
        justify-content : center;
        text-align      : center;

        img {
            max-width : 60px;
        }

        // 992
        @media (min-width : $tablet-portrait) {
            img {
                max-width : 80px;
            }
        }

        // 1200
        @media (min-width : $notebook) {
            img {
                max-width : 100px;
            }
        }

        &:hover {
            transform : scale(1.05);
        }
    }

    .play > .text {
        font-weight : 500;
        margin-top  : 10px;
        text-align  : center;
        color       : $primary;
    }
}