CODEWITHSUNDEEP
youtube-apiyoutube-javascript-apiyoutube-iframe-api
ALI
ALI

Reputation: 31

Youtube iframe api auto play not working for chrome and video resolution set not working for all browser

<script>
    var tag = document.createElement('script');
                tag.src = "https://www.youtube.com/iframe_api";
                var firstScriptTag = document.getElementsByTagName('script')[0];
                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
                var player;
                function onYouTubeIframeAPIReady() {
                    player = new YT.Player('youtube-vid', { 
                    videoId: 'M7lc1UVf-VE',
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                    });
                }
                function onPlayerReady(event) {
                   event.target.playVideo(); 
                    event.target.setPlaybackQuality('hd1080'); 
                }
                function onPlayerStateChange(e) {
                    if (e.data === YT.PlayerState.ENDED) {
                        player.playVideo(); 
                      }
                      
                }
</script>

Please help me out to set youtube quality hd1080 and auto play on page load I used the above code but it not working for me

Thanks in advance!

Upvotes: 2

Views: 5727

Answers (2)

Hans Karlsen
Hans Karlsen

Reputation: 2435

Had to go like this to get start in Chrome:

function onPlayerReady(event) { 
  player.mute(); // have to in order to allow auto start in chrome! 
  player.seekTo(20, true); 
}

Upvotes: 4

Viral
Viral

Reputation: 1337

Chrome's autoplay policies changed in April of 2018 https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Google Chrome will not allow autoplay video. If you want to auto play then you have to mute video. As per policy guidelines.

FireFox browser enter image description here Google Chrome enter image description here 

// 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);

//    This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        events: {
            'onReady': onPlayerReady
        }
    });
}

//  The API will call this function when the video player is ready.
function onPlayerReady(event) {
    player.setPlaybackRate(2);
    event.target.playVideo();
}
<div id="player"></div>

Upvotes: 7

Related Questions