CODEWITHSUNDEEP
javascriptvideoyoutubeautoplay
Steve Gee
Steve Gee

Reputation: 49

Stop YouTube API Autoplay

I have a video player on my website made up of codes held in a database, and I'd like it to stop playing the first video on autoplay. What code is needed and where does it go?

The code I currently use is:

var $vid1 = <?php echo json_encode($code_1); ?>;
var $vid2 = <?php echo json_encode($code_2); ?>;
var $vid3 = <?php echo json_encode($code_3); ?>;
var $vid4 = <?php echo json_encode($code_4); ?>;
var $vid5 = <?php echo json_encode($code_5); ?>;
var $vid6 = <?php echo json_encode($code_6); ?>;
var $vid7 = <?php echo json_encode($code_7); ?>;
var $vid8 = <?php echo json_encode($code_8); ?>;
var videoIDs = [
    $vid1,
    $vid2,
    $vid3,
    $vid4,
    $vid5,
    $vid6,
    $vid7,
    $vid8
];

var player, currentVideoId = 0;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '248',
        width: '440',
        playerVars: {
            autoplay: 0
        },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerReady(event) {
    event.target.loadVideoById(videoIDs[currentVideoId]);
}

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
        currentVideoId++;
        if (currentVideoId < videoIDs.length) {
            player.loadVideoById(videoIDs[currentVideoId]);
        }
    }
}

function next(){
    currentVideoId++;
    if (currentVideoId < videoIDs.length) {
            player.loadVideoById(videoIDs[currentVideoId]);
    }
}

function previous(){
    currentVideoId--;
    if (currentVideoId >= 0) {
            player.loadVideoById(videoIDs[currentVideoId]);
    }
    else currentVideoId = 0;
}

Upvotes: 0

Views: 1576

Answers (2)

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

There's a parameter you can supply to stop videos auto playing. You just need to add this to your existing code...

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '248',
        width: '440',
        playerVars: {
            autoplay: 0
        },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

You can find more info on the playerVars options here...

https://developers.google.com/youtube/player_parameters?playerVersion=HTML5

Upvotes: 0

silidragos
silidragos

Reputation: 161

There should be a parameter autoplay:0 to add inside new YT.player() parameters.

More details here: https://developers.google.com/youtube/player_parameters#autoplay

Upvotes: 0

Related Questions