Background Autoplay Iframe Youtube


    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 3. This function creates an iframe> (and YouTube player)
    //    after the API code downloads.
    var player;
    var bgVideoID = document.querySelector('#player').getAttribute('data-video');
    var playerOptions = {
            // Autoplay + mute has to be activated (value = 1) if you want to autoplay it everywhere 
            // Chrome/Safari/Mobile
            autoplay: 1,
            playsinline: 1,
            mute: 1,
            autohide: 1, 
            modestbranding: 0, 
            rel: 0, 
            showinfo: 0, 
            controls: 0,
            disablekb: 1, 
            enablejsapi: 1, 
            iv_load_policy: 3,
            // For looping video you have to have loop to 1
            // And playlist value equal to your currently playing video
            loop: 1,
            playlist: bgVideoID,
        
        };
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: bgVideoID,
            playerVars: playerOptions,
            events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
            }
        });
    }

    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
        event.target.playVideo();
    }

    // 5. The API calls this function when the player's state changes.
    //    The function indicates that when playing a video (state=1),
    //    the player should play for six seconds and then stop.
    var done = false;
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
            // setTimeout(stopVideo, 6000);
            done = true;
        }
    }
    function stopVideo() {
        player.stopVideo();
    }

Click Image run Iframe Youtube

=>Bug mobile

JS:


$(".iframe-video .overlay-img").on("click", function() {
    $(this).addClass("d-none");
    $(this).prev("iframe")[0].src += "?autoplay=1";
})

Click Button Autoplay video on Modal


// Gets the video src from the data-src on each button
var $videoSrc;
$('.gameplay-section .gameplay-slider .item .box-content .box-right .btn-watch a').click(function() {
    $videoSrc = $(this).attr("data-src");
    console.log("button clicked" + $videoSrc);
});

// when the modal is opened autoplay it
$("#gameplayModal").on("shown.bs.modal", function(e) {
    console.log("modal opened" + $videoSrc);
    // set the video src to autoplay and not to show related video. Youtube related video is like a box of chocolates... you never know what you're gonna get
    $("#video").attr(
    "src",
    $videoSrc + "?autoplay=1&showinfo=0&modestbranding=1&rel=0&mute=1"
    );
});

// stop playing the youtube video when I close the modal
$("#gameplayModal").on("hide.bs.modal", function(e) {
    // a poor man's stop video
    $("#video").attr("src", $videoSrc);
});